import { useContext } from 'react'

import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'

import WizardStore, { WizardContext, ACTIONS } from '../context/wizardStore'

import DateSelect from './dateSelect'
import Contact from './contact'
import Driver from './driver'

const STEPS = [
  { id: 'DATE_SELECT', component: DateSelect },
  { id: 'CONTACT', component: Contact },
]

function WizardInternal() {
  const { state, dispatch } = useContext(WizardContext)
  const { currentStep } = state

  const isFirstStep = currentStep === 0
  const isLastStep = currentStep === STEPS.length - 1

  return (
    <Form
      onSubmit={(event) => {
        event.preventDefault()

        const fd = new FormData(event.currentTarget)
        for (const [key, value] of fd.entries()) {
          console.log(key, value)
        }

        if (!isLastStep) {
          dispatch({ type: ACTIONS.NEXT_STEP })
          return
        }

        throw Error('Submit not implemented yet')
        dispatch({ type: ACTIONS.SUBMIT })
      }}
    >
      {STEPS.map(({ id, component: Component }, index) => (
        <>{currentStep === index && <Component />}</>
      ))}
      {!isFirstStep && (
        <Button
          variant="secondary"
          onClick={() => dispatch({ type: ACTIONS.PREV_STEP })}
        >
          Zurück
        </Button>
      )}
      {!isLastStep && <Button type="submit">Weiter</Button>}
      {isLastStep && <Button type="submit">Absenden</Button>}
    </Form>
  )
}

export default function Wizard() {
  return (
    <WizardStore>
      <WizardInternal />
    </WizardStore>
  )
}