import { Stepper } from '@tidbcloud/uikit'
import { useUncontrolled } from '@tidbcloud/uikit/hooks'
import { clsx } from 'clsx'

interface StepItem {
  name?: string
  description?: string
  content: React.ReactNode
  disabled?: boolean
}

interface StepsProps {
  className?: string
  steps: StepItem[]
  current?: number
}

const StepsWizard = ({ steps, className, current: currentValue }: StepsProps) => {
  const [current, setCurrent] = useUncontrolled({
    value: currentValue
  })

  return (
    <Stepper
      styles={{
        root: {
          display: 'flex',
          flexDirection: 'row-reverse',
          gap: 24,
          justifyContent: 'center'
        },
        content: {
          paddingTop: 0,
          maxWidth: 880,
          flexGrow: 1
        },
        stepBody: {
          marginTop: 8
        }
      }}
      iconSize={32}
      className={clsx(className)}
      active={current}
      onStepClick={setCurrent}
      orientation="vertical"
    >
      {steps.map((step, index) => {
        // starts step = 0
        const name = step.name ?? `Step ${index + 1}`

        return (
          <Stepper.Step
            key={name}
            label={name}
            description={step.description}
            allowStepClick={false}
            allowStepSelect={false}
          >
            {step.content}
          </Stepper.Step>
        )
      })}
    </Stepper>
  )
}

export default StepsWizard