import React from 'react'
import Link from 'next/link'
import Footer from '../../components/footer'
import Header from '../../components/header'
import { daysFormatFrontend } from '../../helpers/date'
import withSession, { isAdminSession, redirectToLogin } from '../../lib/session'

import { getServerSideRecentBookings } from '../../lib/getServerSideProps'

export const getServerSideProps = withSession(async (context) => {
  const { req, res } = context

  const adminUser = isAdminSession(req)

  if (!adminUser) {
    redirectToLogin(req, res)
    return { props: {} }
  }

  const serverSideRecentBookingProps = await getServerSideRecentBookings()
  return {
    props: {
      ...serverSideRecentBookingProps.props,
      user: adminUser,
    },
  }
})

export default function AdminRecentBookings({ bookings }) {
  return (
    <>
      <Header label="Buchungsliste" />
      <main className="main py-3">
        {bookings.map((booking: any) => (
          <div
            key={booking.uuid}
            className="mb-6 bg-white shadow overflow-hidden sm:rounded-lg"
          >
            <div className="px-4 py-5 sm:px-6">
              <h3 className="text-lg leading-6 font-medium text-gray-900">
                <Link href={`/admin/booking/${booking.uuid}`}>
                  <a className="link">Booking {booking.uuid}</a>
                </Link>
              </h3>
              <p className="mt-1 max-w-2xl text-sm text-gray-500">
                Last updated {new Date(booking.updatedAt).toLocaleTimeString()}
              </p>
            </div>
            <div className="border-t border-gray-200">
              <dl>
                <div className="bg-gray-100 px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                  <dt className="text-sm font-medium text-gray-500">
                    Buchungszeitraum
                  </dt>
                  <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    {daysFormatFrontend(booking.days)}
                  </dd>
                </div>
                <div className="bg-white px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                  <dt className="text-sm font-medium text-gray-500">Bucher</dt>
                  <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    {booking.booker.name}
                  </dd>
                </div>
                <div className="bg-gray-100 px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                  <dt className="text-sm font-medium text-gray-500">Email</dt>
                  <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    {booking.booker.email}
                  </dd>
                </div>
                <div className="bg-white px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                  <dt className="text-sm font-medium text-gray-500">Status</dt>
                  <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                    {booking.status}
                  </dd>
                </div>
              </dl>
            </div>
          </div>
        ))}
      </main>
      <Footer />
    </>
  )
}