import React, { useContext } from 'react'
import Contact from './contact'
import BookProvider, { BookContext } from '../../context/book'
import DateSelect from './dateSelect'
import Reason from './reason'

function BookForm() {
  const { onSubmit, state, forgetData } = useContext(BookContext)
  const { postData, postDataError, dataStoredLoaded } = state

  return (
    <>
      <form
        className="w-full"
        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="ml-3 font-medium text-blue-400 underline cursor-pointer hover:text-blue-600"
              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 Book() {
  return (
    <BookProvider>
      <BookForm />
    </BookProvider>
  )
}