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 Reason from './reason'
import Contact from './contact'
//import Driver from './driver'

function WizardInternal() {
  const { onSubmit, state, storeData } = useContext(WizardContext)
  const { postData, postDataSuccess, postDataError } = state

  if (postDataSuccess) {
    return (
      <>
        <h3>Danke, die Buchung ist in Bearbeitung!</h3>
        <p>Wir melden uns per E-Mail sobald die Buchung bestätigt ist.</p>
        <p>
          Sollen die eingegebenen Daten in Deinem Browser für die nächste
          Buchung gespeichert werden?
        </p>
        <Button onClick={storeData}>Ja, bitte speichern</Button>
      </>
    )
  }

  const onChange = (payload) =>
    dispatch({ action: ACTIONS.SET_FORM_DATA, payload })

  return (
    <Form
      onSubmit={(event) => {
        event.preventDefault()
        onSubmit()
      }}
    >
      <DateSelect />
      <Reason />
      <Contact />
      <div>{postDataError}</div>
      <Button type="submit" disabled={postData}>
        {postData ? 'Speichern...' : 'Absenden'}
      </Button>
    </Form>
  )
}

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