import React, { useEffect, useState } from 'react'
import Link from 'next/link'
import { IBooking } from '../../../db/booking'
import { loadBookingData, storeBookingData } from '../../../helpers/storage'
import { getServerSideBooking } from '../../../lib/getServerSideProps'
import Layout from '../../../components/layout'

export const getServerSideProps = getServerSideBooking

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

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

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

  return (
    <Layout>
      <h3 className="thanks mb-3 mt-6 text-lg">
        Vielen Dank für die Buchungsanfrage
      </h3>
      <p className="mb-6">
        Nach Prüfung bestätigen wir die Buchung zeitnah per E-Mail.
      </p>
      <p>
        Den{' '}
        <Link href={`/bookings/${booking.uuid}`} className="link underline">
          Link
        </Link>{' '}
        zur Buchung schicken wir Dir auch per E-Mail. Dort kann die Buchung auch
        jederzeit storniert werden.
      </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="mt-3 ml-0 btn btn-blue">
            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>
      )}
    </Layout>
  )
}