import React from 'react'
import Link from 'next/link'
import { useSession } from 'next-auth/react'
import Layout from '../../components/layout';
import Denied from '../../components/denied';
import { daysFormatFrontend } from '../../helpers/date'

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

export const getServerSideProps = getServerSideRecentBookings;

export default function AdminRecentBookings({ bookings }) {
  const { data: session, status}  = useSession();

  if (typeof window !== 'undefined' && status === "loading") return null;

  if (!session) { return <Layout><Denied /></Layout> }

  if (!bookings) return null;

  return (
    <Layout>
      {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/bookings/${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).toLocaleString()}
            </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.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.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>
      ))}
    </Layout>
  )
}

AdminRecentBookings.auth = true