import React, { useContext } from 'react'
import Contact from './contact'
import WizardStore, { WizardContext } from './context/wizardStore'
import DateSelect from './dateSelect'
import Reason from './reason'

function WizardInternal() {
  const { onSubmit, state, forgetData } = useContext(WizardContext)
  const { postData, postDataError, dataStoredLoaded } = state

  return (
    <>
      <form
        className="form"
        onSubmit={(event) => {
          event.preventDefault()
          onSubmit()
        }}
      >
        <DateSelect />
        <Reason />
        {dataStoredLoaded && (
          <p className="mb-6 info-message">
            Buchungsdaten wurden aus Deinem Browser geladen und vorausgefüllt.{' '}
            <a className="link" onClick={forgetData}>
              Daten wieder vergessen
            </a>
          </p>
        )}
        <Contact />
        <div className="flex items-end">
          <button type="submit" disabled={postData} className="btn btn-blue">
            {postData ? 'Speichern...' : 'Absenden'}
          </button>
          {postDataError && (
            <div className="error-message flex-grow">{postDataError}</div>
          )}
        </div>
      </form>
    </>
  )
}

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