import Box from '../box'
import Button from '../button'
import { useStyleConfig, vui } from '../core'
import Icon from '../icon'
import T from '../t'
import { cs } from '../utils'
import { StepIndicatorProps } from './stepIndicatorTypes'

const Content = ({ number, variant, size }: { number?: number; variant?: string; size?: string }) => {
  if (typeof number === 'undefined') return null
  if (variant === 'completed') return <Icon name="falCheck" size={size as any} />
  if (variant === 'error') return <Icon name="falTimes" size={size as any} />
  return (
    <T fontSize={size === 'md' ? 16 : 14} fontWeight={600}>
      {number}
    </T>
  )
}

/**
 * Implements stepper indicator **
 */
export const StepIndicator = vui<'div', StepIndicatorProps>((props, ref) => {
  const { icon, number, className, size = 'md', variant = 'active', ...rest } = props
  const styles = useStyleConfig('StepIndicator', props)

  return icon ? (
    <Button
      className={cs('vui-stepIndicator', 'vui-stepIndicatorIcon', className)}
      icon={icon}
      ref={ref}
      {...styles.icon}
      {...rest}
      isRound
      minW="auto"
      pointerEvents="none"
      size={size}
    />
  ) : (
    <Button
      className={cs('vui-stepIndicator', 'vui-stepIndicatorNumber', className)}
      ref={ref}
      {...styles.button}
      {...rest}
      isRound
      minW="auto"
      outline="6px solid white"
      pointerEvents="none"
      position="relative"
      size={size}
    >
      <Box mx={0.5} position="relative" />
      <Box mx={0.5} position="absolute">
        <Content number={number} size={String(size)} variant={String(variant)} />
      </Box>
    </Button>
  )
})

StepIndicator.displayName = 'StepIndicator'

export default StepIndicator
