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, storeData, forgetData } = useContext(AppContext)
  const {
    postData,
    postDataSuccess,
    postDataError,
    dataStored,
    dataStoredLoaded,
  } = state

  if (postDataSuccess) {
    return (
      <>
        <h3>Danke, die Buchung ist in Bearbeitung!</h3>
        <p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
        {!dataStoredLoaded && typeof dataStored !== 'boolean' && (
          <>
            <p>
              Sollen die eingegebenen Daten in <strong>Deinem Browser</strong>{' '}
              für die nächste Buchung gespeichert werden?
            </p>
            <button onClick={() => storeData(true)} className="btn btn-blue">
              Ja, bitte speichern
            </button>
            <button
              onClick={() => storeData(false)}
              className="btn btn-grey ml-2"
            >
              Nein danke
            </button>
          </>
        )}
        {dataStored === true && (
          <p>Ok, die Daten wurden für die nächste Buchung gespeichert.</p>
        )}
      </>
    )
  }

  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>
  )
}