import React, { useContext } from 'react'

import { WizardContext } from '../../context/wizardStore'
import Footer from '../../components/footer'

// TODO: load booking somehow if we navigate to booking
// TODO: when storing data take loaded booking instead of fromData
// TODO: show state of booking and minimal data

export default function Booking() {
  const { state, storeData } = useContext(WizardContext)
  const { dataStored, dataStoredLoaded } = state

  return (
    <div className="mx-3 flex flex-col min-h-screen">
      <main className="flex-grow">
        <h1 className="text-3xl">Pfadi Bussle Buchung</h1>

        <h3>Vielen Dank für die Buchung!</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>
        )}
        <div>{JSON.stringify(state.booking, null, 4)}</div>
      </main>

      <Footer />
    </div>
  )
}