wedding-planner-frontend/app/ui/guests/affinity-groups-tree.tsx

/* Copyright (C) 2024 Manuel Bustillo*/

'use client'

import React, { useState, useEffect, Suspense } from 'react';
import { Tree } from 'primereact/tree';
import { PrimeIcons } from 'primereact/api';
import { debug } from 'console';
import { Group } from '@/app/lib/definitions';

export default function AffinityGroupsTree() {
    const [nodes, setNodes] = useState([]);

    const groupToNode = (group: Group): any => {
        return({
            key: group.id,
            label: `${group.name} (${group.guest_count})`,
            icon: group.icon,
            children: group.children.map((child) => groupToNode(child)),
            className: "px-4",
        })
    }

    const parseNode = (record: any, included: any[]): Group => {
        if (!record.attributes) {
            record = included.find((a) => a.id === record.id);
        }
        
        const children: Group[] = (record?.relationships?.children?.data || []).map((child: any) => {
            return (parseNode(child, included));
        });

        const children_guest_count: number = children.reduce((acc: number, child: Group) => acc + child.guest_count, 0);

        return ({
            id: record.id,
            name: record.attributes.name,
            guest_count: record.attributes.guest_count + children_guest_count,
            icon: record.attributes.icon,
            children: children,
        })
    }


    useEffect(() => {
        if (nodes.length > 0) {
            return;
        }
        fetch("/api/groups.json")
            .then((response) => response.json())
            .then((data) => {
                setNodes(data.data.map((record: any) => {
                    return (groupToNode(parseNode(record, data.included)));
                }))
            });
    });

    return (
        <div className="card flex justify-content-center">
            <Suspense>
                <Tree value={nodes} dragdropScope="affinity-groups" onDragDrop={(e) => setNodes(e.value as any)} className="w-full md:w-30rem" />
            </Suspense>
        </div>
    )
}