import React from 'react'
import Link from 'next/link'
import Layout from '../../components/layout'
import { daysFormatFrontend } from '../../helpers/date'

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

export const getServerSideProps = getServerSideRecentBookings

function AdminRecentBookings({ bookings }) {
  if (!bookings || !bookings.length) {
    return (
      <Layout>
        <h3 className="text-lg leading-6 font-medium text-gray-900">
          No recent bookings 😿
        </h3>
      </Layout>
    )
  }

  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.authenticationRequired = true

export default AdminRecentBookings