import React, { useEffect, useState } from 'react'
import Link from 'next/link'
import Footer from '../../../components/footer'
import Header from '../../../components/header'
import { Booking } from '../../../db/booking'
import { loadBookingData, storeBookingData } from '../../../helpers/storage'
import { getServerSideBooking } from '../../../lib/getServerSideProps'

export const getServerSideProps = getServerSideBooking

export default function ShowBookingStored({
  booking: booking,
}: {
  booking: Booking
}) {
  const [storedBookingData, setStoredBookingData] = useState(null)
  const [bookingDataStored, setBookingDataStored] = useState(false)

  useEffect(() => setStoredBookingData(loadBookingData()), [])

  const store = () => {
    storeBookingData(booking)
    setBookingDataStored(true)
  }

  return (
    <div className="mx-3 flex flex-col min-h-screen">
      <Header />
      <main className="flex-grow">
        <h3>Vielen Dank für die Buchungsanfrage!</h3>
        <p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
        <p>
          <Link href={`/booking/${booking.uuid}`}>
            <a className="link">Buchungstatus einsehen</a>
          </Link>
        </p>
        {!storedBookingData && !bookingDataStored && (
          <div className="mt-6">
            <p>
              Sollen deine Buchungsdaten für die nächste Buchung in{' '}
              <strong>deinem Browser</strong> gespeichert werden?
            </p>
            <button onClick={store} className="btn btn-blue ml-0 mt-3">
              Ja, bitte speichern
            </button>
          </div>
        )}
        {bookingDataStored === true && (
          <div className="mt-6">
            <p className="info-message">
              Ok, deine Buchungsdaten wurden für die nächste Buchung
              gespeichert.
            </p>
          </div>
        )}
      </main>

      <Footer />
    </div>
  )
}