import { Box } from '../box'
import { styled, vui } from '../core'
import { StepIndicator } from '../stepIndicator'
import { cs } from '../utils'
import { stepClassName } from './consts'
import { useStepperHorizontalContext } from './context'
import StepHorizontalTail from './stepHorizontalTail'
import StepHorizontalTitle from './stepHorizontalTitle'
import { StepHorizontalProps } from './stepperHorizontalTypes'

export const StepHorizontalBase = styled.divBox`
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
`

/**
 * Implements a Horizontal step component
 */
export const StepHorizontal = vui<'div', StepHorizontalProps>(
  ({ icon, number, size: propSize = 'md', description, title, className, variant, children }, ref) => {
    const context = useStepperHorizontalContext()
    const size = context?.size || propSize
    return (
      <StepHorizontalBase className={cs(stepClassName, stepClassName + variant, className)} ref={ref}>
        <StepHorizontalTail size={size} variant={variant as any} />
        <Box display="block" textAlign="center">
          <StepIndicator icon={icon} number={number} size={size} variant={variant} />
        </Box>
        <Box display="block" textAlign="center">
          {!!title && (
            <StepHorizontalTitle size={size} variant={variant as any}>
              {title}
            </StepHorizontalTitle>
          )}
          {!!description && (
            <Box color="sandstone.45" display="block" fontSize={`${size === 'md' ? 14 : 12}px`} textAlign="center">
              {description}
            </Box>
          )}
          <Box display="block">{children}</Box>
        </Box>
      </StepHorizontalBase>
    )
  },
)

StepHorizontal.displayName = 'StepHorizontal'

export default StepHorizontal
