import React from 'react'
import Link from 'next/link'

import { daysFormatFrontend } from '../helpers/date'
import { IBooking } from '../db/booking'

export default function BookingTable({
  booking,
}: {
  booking: IBooking
}) {
  const data = [
    { name: 'Status', value: booking.status },
    { name: 'Buchungszeitraum', value: daysFormatFrontend(booking.days) },
    { name: 'Organisation', value: booking.org },
    { name: 'Name', value: booking.name },
    {
      name: 'Addresse',
      value: (
        <>
          <div>{booking.street}</div>
          <div>
            {booking.zip} {booking.city}
          </div>
        </>
      ),
    },
    {
      name: 'Email',
      value: (
        <Link href={`mailto:${booking.email}`} className="link">
          {booking.email}
        </Link>
      ),
    },
    { name: 'Phone', value: booking.phone },
    { name: 'Zweck', value: booking.purpose },
    { name: 'Ziel', value: booking.destination },
    { name: 'CalendarEventId', value: booking.calendarEventId },
  ]
  return (
    <div
      key={booking.uuid}
      className="mt-6 mb-6 bg-white border border-slate-100 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}`} className="link">
            Booking {booking.uuid}
          </Link>
        </h3>
        <p className="mt-1 max-w-2xl text-sm text-gray-500">
          Created{' '}
          {new Date(booking.createdAt).toLocaleString(
            new Intl.Locale('de')
          )}
        </p>
        <p className="mt-1 max-w-2xl text-sm text-gray-500">
          Last updated{' '}
          {new Date(booking.updatedAt as string).toLocaleString(
            new Intl.Locale('de')
          )}
        </p>
      </div>
      <div className="border-t border-gray-200">
        <dl>
          {data.map(({ name, value }, index) => (
            <div
              key={`${booking.uuid}-${name}`}
              className={`${index % 2 === 1 ? 'bg-white' : '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">{name}</dt>
              <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                {value || 'n/a'}
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </div>
  )
}