import { useContext, useRef } 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 Reason from './reason'
import Contact from './contact'
//import Driver from './driver'

function WizardInternal() {
  const { state, storeBooking } = useContext(WizardContext)
  const onChange = (payload) =>
    dispatch({ action: ACTIONS.SET_FORM_DATA, payload })

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

        storeBooking()
      }}
    >
      <DateSelect />
      <Reason />
      <Contact />
      <Button type="submit">Absenden</Button>
    </Form>
  )
}

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