wedding-planner-frontend/app/ui/invitations/board.tsx

'use client';

import { AbstractApi } from "@/app/api/abstract-api";
import { Guest } from "@/app/lib/guest";
import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import { useEffect, useRef } from "react";
import { useState } from "react";

function InvitationCard({ invitation, allGuests, onGuestAdded }: { invitation: Invitation, allGuests: Guest[], onGuestAdded: (guest: Guest) => void }) {

  const [guests, setGuests] = useState<Guest[]>(invitation.guests);

  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (ref.current) {
      return dropTargetForElements({
        element: ref.current,
        onDrop: (data) => {
          console.log('Dropped guest ID:', data.source.element.dataset.guestId);
          const guestId = data.source.element.dataset.guestId;
          if (guestId) {
            const guestToAdd = allGuests.find((guest) => guest.id === guestId);
            if (guestToAdd) {
              setGuests((prevGuests) => [...prevGuests, guestToAdd]);
              onGuestAdded(guestToAdd);
            }
          }
        },
      });
    }
  }, []);

  return (
    <div
      key={invitation.id}
      ref={ref}
      className="flex items-center justify-center w-full bg-green-800 border border-green-900"
      style={{ aspectRatio: "1.618 / 1" }}
    >
      {guests.length === 0 ? (
        <p className="text-center text-yellow-500 text-lg italic">
          (empty invitation)
        </p>
      ) : (
        <ul className="text-center text-yellow-500 text-lg">
          {guests.map((guest) => (
            <li key={guest.id}>{guest.name}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

function GuestCard(guest: Guest) {
  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (ref.current) {
      return draggable({
        element: ref.current,
        onDragStart: () => console.log('Something started dragging in me!')
      });
    }
  }, [guest.id]);

  return (
    <div
      key={guest.id}
      ref={ref}
      className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
      draggable="true"
      data-guest-id={guest.id}>
      <h3 className="text-md font-medium">{guest.name}</h3>
    </div>
  )
}

export default function InvitationsBoard({ guests, invitations }: {
  guests: Array<Guest>,
  invitations: Array<Invitation>
}) {
  const api = new AbstractApi<Invitation>();
  const serializer = new InvitationSerializer();

  const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
    guests.filter(
      (guest) => !invitations.some((invitation) =>
        invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
      )
    )
  );

  // Sort invitations to display those without guests at the top
  const sortedInvitations = [...invitations].sort((a, b) => {
    if (a.guests.length === 0 && b.guests.length > 0) return -1;
    if (a.guests.length > 0 && b.guests.length === 0) return 1;
    return 0;
  });

  function handleCreateInvitation() {
    api.create(serializer, new Invitation(), () => {
      console.log("Invitation created successfully");
    });
  }

  return (
    <div className="flex h-screen">
      {/* Left Column: Guests */}
      <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
        <h2 className="text-lg font-semibold mb-4">{unassignedGuests.length} guests without invitation</h2>
        <div>
          {unassignedGuests.map((guest) => (
            <GuestCard key={guest.id} {...guest} />
          ))}
        </div>
      </div>

      {/* Right Column: Invitations */}
      <div className="w-3/4 h-full overflow-auto p-4">
        <h2 className="text-lg font-semibold mb-4">
          {invitations.length} invitations
        </h2>

        <button
          onClick={handleCreateInvitation}
          className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          Create New Invitation
        </button>


        <div className="grid grid-cols-4 gap-6">

          {sortedInvitations.map((invitation) => (
            <InvitationCard
              key={invitation.id}
              invitation={invitation}
              allGuests={guests}
              onGuestAdded={(guestAdded: Guest) => {
                console.log(`Guest added: ${guestAdded.name}`);
                setUnassignedGuests((prevUnassignedGuests) => prevUnassignedGuests.filter(g => g.id !== guestAdded.id));
              }}
            />
          ))}
        </div>

      </div>
    </div>
  );
}