import { useEffect } from 'react'

import type { getTables } from '#/lib/reservations'

type TableRow = Awaited<ReturnType<typeof getTables>>[number]

type Props = {
  table: TableRow | null
  onClose: () => void
}

export function TableDetailDialog({ table, onClose }: Props) {
  useEffect(() => {
    if (!table) return

    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === 'Escape') onClose()
    }

    document.addEventListener('keydown', handleKeyDown)
    return () => document.removeEventListener('keydown', handleKeyDown)
  }, [table, onClose])

  if (!table) return null

  return (
    <div className="confirm-dialog-backdrop" onClick={onClose}>
      <div
        className="confirm-dialog reservation-detail-dialog"
        role="dialog"
        aria-modal="true"
        aria-labelledby="table-detail-title"
        onClick={(event) => event.stopPropagation()}
      >
        <h2 id="table-detail-title" className="confirm-dialog-title">
          {table.name}
        </h2>

        {table.imageUrl && <img className="table-preview" src={table.imageUrl} alt="" />}

        <dl className="detail-list">
          <div>
            <dt>Tischnummer</dt>
            <dd>{table.tableNumber ?? '—'}</dd>
          </div>
          <div>
            <dt>Name</dt>
            <dd>{table.name}</dd>
          </div>
          <div>
            <dt>Plätze</dt>
            <dd>{table.seats}</dd>
          </div>
          <div>
            <dt>Marker</dt>
            <dd>{table.markerX !== null && table.markerY !== null ? 'Gesetzt' : 'Nicht gesetzt'}</dd>
          </div>
        </dl>

        <div className="confirm-dialog-actions">
          <button type="button" className="btn btn-secondary" onClick={onClose}>
            Schließen
          </button>
        </div>
      </div>
    </div>
  )
}