import { GetServerSideProps } from 'next'
import React, { useEffect, useState } from 'react'
import Footer from '../../../components/footer'
import Header from '../../../components/header'
import Input from '../../../components/wizard/input'
import { BillDocument } from '../../../db/bill'
import { BookingDocument } from '../../../db/booking'
import { BOOKING_STATUS, MILAGE_RATES } from '../../../db/enums'
import { getBookingByUUID } from '../../../db/index'
import { dateFormatFrontend } from '../../../helpers/date'

export const getServerSideProps: GetServerSideProps = async (context) => {
  const {
    res,
    params: { uuid: uuids },
  } = context
  const uuid = Array.isArray(uuids) ? uuids[0] : uuids
  const booking = await getBookingByUUID(uuid)

  if (!booking) {
    res.statusCode = 404
    res.end()
    return { props: {} }
  }

  // TODO: hack, not sure why _id is not serilizable
  const bookingJSON = JSON.parse(JSON.stringify(booking.toJSON()))
  return {
    props: { booking: bookingJSON },
  }
}

function getBookingStatus(booking: BookingDocument) {
  switch (booking.status) {
    case BOOKING_STATUS.REQUESTED:
      return 'In Bearbeitung'
    case BOOKING_STATUS.CONFIRMED:
      return 'Best�tigt'
    case BOOKING_STATUS.REJECTED:
      return 'Abgewiesen'
    case BOOKING_STATUS.CANCELED:
      return 'Storniert'
    default:
      return 'Unbekannt - bitte kontaktieren Sie uns!'
  }
}

async function saveBill(booking: BookingDocument, bill: BillDocument) {
  const response = await fetch(`/api/booking/${booking.uuid}/bill/`, {
    method: 'POST',
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json',
    },
    referrerPolicy: 'no-referrer',
    body: JSON.stringify(bill),
  })
  return response.json()
}

export default function Bill({
  booking: bookingProp,
}: {
  booking: BookingDocument
}) {
  const [booking, setBooking] = useState(bookingProp)
  const [milageStart, setMilageStart] = useState(0)
  const [milageEnd, setMilageEnd] = useState(0)
  const [rate, setRate] = useState(MILAGE_RATES.EXTERN_UP_TO_200)
  const milage =
    (0 < milageStart && milageStart < milageEnd && milageEnd - milageStart) || 0
  const total = (milage && rate && milage * rate) || 0

  // in case the props change, update the internal state
  useEffect(() => setBooking(bookingProp), [bookingProp])

  return (
    <div className="mx-3 flex flex-col min-h-screen">
      <Header />
      <main className="flex-grow">
        <h2 className="text-3xl">Pfadi Bussle Buchung</h2>
        <form
          className="form"
          onSubmit={(event) => {
            event.preventDefault()
            saveBill(booking, {
              milageStart,
              milageEnd,
              milage,
              total,
              rate: MILAGE_RATES[rate],
            })
          }}
        >
          <div>
            <strong>Buchungsstatus:</strong> {getBookingStatus(booking)}
          </div>
          <div>
            <strong>Buchungszeitraum:</strong>{' '}
            {dateFormatFrontend(new Date(booking.startDate))} -{' '}
            {dateFormatFrontend(new Date(booking.endDate))}
          </div>
          <div>
            <strong>Bucher:</strong> {booking.booker.name}
          </div>
          <div>
            <Input
              label="Anfangskilometer"
              name="milageStart"
              required
              value={milageStart}
              type="number"
              onChange={(e: React.ChangeEvent<React.ElementRef<'input'>>) =>
                setMilageStart(Number(e.target.value))
              }
            />
            <Input
              label="Endkilometer"
              name="milageEnd"
              required
              value={milageEnd}
              type="number"
              onChange={(e: React.ChangeEvent<React.ElementRef<'input'>>) =>
                setMilageEnd(Number(e.target.value))
              }
            />
            <Input label="Gefahren" name="milage" readOnly value={milage} />
            <div className="fsw">
              <div className="fs">
                <label className="flabel">Rate</label>
                <div className="relative">
                  <select
                    className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                    id="rate"
                    onChange={(
                      e: React.ChangeEvent<React.ElementRef<'select'>>
                    ) => setRate(Number(e.target.value))}
                  >
                    <option value={MILAGE_RATES.INTERN_UP_TO_200}>
                      Intern bis 200 ({MILAGE_RATES.INTERN_UP_TO_200})
                    </option>
                    <option value={MILAGE_RATES.INTERN_200_1000}>
                      Intern 200-1000 ({MILAGE_RATES.INTERN_200_1000})
                    </option>
                    <option value={MILAGE_RATES.INTERN_1001_2000}>
                      Intern 1001-2000 ({MILAGE_RATES.INTERN_1001_2000})
                    </option>
                    <option value={MILAGE_RATES.INTERN_OVER_2000}>
                      Intern ab 2001 ({MILAGE_RATES.INTERN_OVER_2000})
                    </option>
                    <option value={MILAGE_RATES.EXTERN_UP_TO_200}>
                      Extern bis 200 ({MILAGE_RATES.EXTERN_UP_TO_200})
                    </option>
                    <option value={MILAGE_RATES.EXTERN_200_1000}>
                      Extern 200-1000 ({MILAGE_RATES.EXTERN_200_1000})
                    </option>
                    <option value={MILAGE_RATES.EXTERN_1001_2000}>
                      Extern 1001-2000 ({MILAGE_RATES.EXTERN_1001_2000})
                    </option>
                    <option value={MILAGE_RATES.EXTERN_OVER_2000}>
                      Extern ab 2001 ({MILAGE_RATES.EXTERN_OVER_2000})
                    </option>
                  </select>
                  <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                    <svg
                      className="fill-current h-4 w-4"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20"
                    >
                      <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                    </svg>
                  </div>
                </div>
              </div>
            </div>

            <Input label="Summe" name="milage" readOnly value={total} />
          </div>
          <button type="submit" className="btn btn-blue">
            Rechnung Erstellen
          </button>
        </form>
      </main>

      <Footer />
    </div>
  )
}