import React, { useContext } from 'react'

import { AppContext } from '../context/appStore'

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

export default function Wizard() {
  const { onSubmit, state, forgetData } = useContext(AppContext)
  const { postData, postDataSuccess, postDataError, dataStoredLoaded } = state

  if (postDataSuccess) {
    // /booking/[id] takes over
    return null
  }

  return (
    <form
      className="w-full max-w-lg"
      onSubmit={(event) => {
        event.preventDefault()
        onSubmit()
      }}
    >
      {dataStoredLoaded && (
        <p className="my-12">
          Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
          <a className="link" onClick={forgetData} href="">
            Daten wieder vergessen
          </a>
        </p>
      )}
      <DateSelect />
      <Reason />
      <Contact />
      <div>{postDataError}</div>
      <div>
        <button type="submit" disabled={postData} className="btn btn-blue">
          {postData ? 'Speichern...' : 'Absenden'}
        </button>
      </div>
    </form>
  )
}