wedding-planner-frontend/app/ui/guests/table.tsx

/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/

'use client';

import { AbstractApi } from '@/app/api/abstract-api';
import { Guest, GuestSerializer } from '@/app/lib/guest';
import { EnvelopeIcon, FunnelIcon, PencilIcon, TrashIcon, UserPlusIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { useState } from 'react';
import TableOfContents from '../components/table-of-contents';

export default function guestsTable({ guests, onUpdate, onEdit }: {
  guests: Guest[],
  onUpdate: () => void,
  onEdit: (guest: Guest) => void
}) {

  const api = new AbstractApi<Guest>();
  const serializer = new GuestSerializer();
  const [invitationId, setInvitationId] = useState<string | undefined>(undefined);
  const [selecting, setSelecting] = useState<boolean>(false);

  function toggleInvitationId(id: string | undefined) {
    console.log('toggleInvitationId', id, invitationId);

    if (id === invitationId) {
      setInvitationId(undefined);
    } else {
      setInvitationId(id);
    }

    console.log('invitationId', invitationId);
  }

  return (
    <TableOfContents
      headers={['Name', 'Group', 'Status', 'Invitation', 'Actions']}
      caption='Guests'
      elements={guests}
      rowRender={(guest) => (
        <tr key={guest.id} className={clsx("bg-white odd:bg-white even:bg-gray-50 border-b", {
          "opacity-25": invitationId && !selecting && guest.invitationId !== invitationId,
          "hover:bg-emerald-100" : selecting && guest.invitationId !== invitationId && guest.status !== 'considered',
          "opacity-25 hover:cursor-not-allowed" : selecting && (guest.invitationId === invitationId || guest.status === 'considered')
        })} >
          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
            {guest.name}
          </td>
          <td className="px-6 py-4">
            {guest.group_name}
          </td>
          <td className="px-6 py-4">
            <span className="flex items-center text-sm me-3">
              <span className={clsx(
                'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
                {
                  'bg-gray-400': guest.status === 'considered',
                  'bg-blue-400': guest.status === 'invited',
                  'bg-green-600': guest.status === 'confirmed',
                  'bg-red-400': guest.status === 'declined',
                  'bg-yellow-400': guest.status === 'tentative',
                }
              )}>
              </span>
              {guest.status}
            </span>
          </td>
          <td>
            {
              guest.invitationId &&
              <div className="flex">
                {!selecting && <FunnelIcon className='size-6 cursor-pointer' onClick={() => toggleInvitationId(guest?.invitationId)} />}
                { invitationId === guest.invitationId && !selecting && <UserPlusIcon className='size-6 cursor-pointer' onClick={() => setSelecting(!selecting)}/>}
                { selecting && invitationId !== guest.invitationId && <UserPlusIcon className='size-6 cursor-pointer' />}
              </div>
            }
          </td>
          <td>
            <div className="flex flex-row items-center">
              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, guest, onUpdate) }} />
              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />

            </div>
          </td>
        </tr>
      )}
    />
  );
}