import { Box, Stepper, Step, StepLabel } from '@mui/material'
import type { NeedBuilderStep } from '../../domain/needBuilder'
import { NeedBuilderStep as S } from '../../domain/needBuilder'

interface Props {
  step: NeedBuilderStep
}

const STEPS = ['Suchkriterien & Gewichtung', 'Vorschau & Speichern']

function toStepIndex(step: NeedBuilderStep): number {
  if (
    step === S.IDLE ||
    step === S.PARSING ||
    step === S.PARSED_REQUIRES_REVIEW ||
    step === S.CLARIFICATION_REQUIRED
  ) return 0
  return 1
}

export function NeedBuilderProgress({ step }: Props) {
  if (step === S.IDLE) return null
  return (
    <Box sx={{ px: 3, py: 2, borderBottom: '1px solid #e2e8f0', bgcolor: '#f8fafc' }}>
      <Stepper activeStep={toStepIndex(step)} alternativeLabel>
        {STEPS.map(label => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
    </Box>
  )
}