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

'use client'

import React, { useState } from "react"
import { TableArrangement } from '@/app/lib/definitions';
import { classNames } from "../components/button";
import TableOfContents from "../components/table-of-contents";
import { loadTableSimulations } from "@/app/api/tableSimulations";

export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
    const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
    const [arrangementsLoaded, setArrangementsLoaded] = useState(false);

    function refreshSimulations() {
      loadTableSimulations((arrangements) => {
        setArrangements(arrangements);
        setArrangementsLoaded(true);
      });
    }

    function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
        onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
    }
  
    !arrangementsLoaded && refreshSimulations();

    return(
      <TableOfContents
        headers={['Name', 'Discomfort', 'Actions']}
        caption='Simulations'
        elements={arrangements}
        rowRender={(arrangement) => (
          <tr key={arrangement.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
            <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
              {arrangement.name}
            </th>
            <td className="px-6 py-4">
              {arrangement.discomfort}
            </td>
            <td>
                <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
            </td>
          </tr>
        )}
      />
    );
}