import { Box } from '../box'
import { styled, vui } from '../core'
import { StepIndicator } from '../stepIndicator'
import { cs } from '../utils'
import { stepClassName } from './consts'
import { useStepperVerticalContext } from './context'
import { StepVerticalProps } from './stepperVerticalTypes'
import StepVerticalTail from './stepVerticalTail'
import StepVerticalTitle from './stepVerticalTitle'

export const StepVerticalBase = styled.divBox`
  display: flex;
  position: relative;
  width: 100%;
`

/**
 * Implements a vertical step component
 */
export const StepVertical = vui<'div', StepVerticalProps>(
  ({ icon, number, size: propSize = 'md', description, title, className, variant, children }, ref) => {
    const context = useStepperVerticalContext()
    const size = context?.size || propSize
    return (
      <StepVerticalBase className={cs(stepClassName, className)} ref={ref}>
        <StepVerticalTail size={size} variant={variant as any} />
        <Box flex={`0 0 ${size === 'md' ? 40 : 30}px`}>
          <StepIndicator icon={icon} number={number} size={size} variant={variant} />
        </Box>
        <Box flex="1" flexDirection="column">
          {!!title && (
            <StepVerticalTitle size={size} variant={variant as any}>
              {title}
            </StepVerticalTitle>
          )}
          {!!description && (
            <Box color="sandstone.45" fontSize={`${size === 'md' ? 14 : 12}px`}>
              {description}
            </Box>
          )}
          <Box>{children}</Box>
        </Box>
      </StepVerticalBase>
    )
  },
)

StepVertical.displayName = 'StepVertical'

export default StepVertical
