"use client";

import { useEffect, useState } from "react";
import AddExpenseButton from "./addExpenseButton";
import { DataTableLayout, ColumnDef } from "ikoncomponents";
import { ProductOfProject } from "@/app/utils/interface/productOfProject";

export interface ExpenseData {
  id: string;
  expenseName: string;
  location: string;
  currency: string;
  cost: number;
  quantity: number;
  remarks?: string;
  totalCost?: number;
}

export default function ExpenseMainDataTable({
  productData,
  setProductData,
}: {
  productData: ProductOfProject | undefined;
  setProductData: React.Dispatch<React.SetStateAction<ProductOfProject | undefined>>;
}) {
  const [convertedData, setConvertedData] = useState<ExpenseData[]>([]);
  const productIdentifier = productData?.productIdentifier;

  useEffect(() => {
    if (!productData?.expenseDetails) {
      setConvertedData([]);
      return;
    }
    const expenseArray: ExpenseData[] = Object.entries(productData.expenseDetails).map(
      ([id, item]: [string, any]) => ({
        id,
        ...item,
        remarks: item.remarks || item.description,
        totalCost: item.totalCost ?? item.cost * item.quantity,
      })
    );

    setConvertedData(expenseArray);
  }, [productData]);

  const columnsProductDetails: ColumnDef<ExpenseData>[] = [
    { accessorKey: "expenseName", header: "Expense Name" },
    { accessorKey: "location", header: "Location" },
    { accessorKey: "currency", header: "Currency" },
    { accessorKey: "cost", header: "Cost" },
    { accessorKey: "quantity", header: "Quantity" },
    {
      accessorKey: "totalCost",
      header: "Total Cost",
      cell: (row) => (row.totalCost ?? 0).toLocaleString(undefined, { minimumFractionDigits: 2 }),
    },
    { accessorKey: "remarks", header: "Remarks" },
  ];

  return (
    <DataTableLayout
      columns={columnsProductDetails}
      data={convertedData}
      extraTools={{
        keyExtractor: (row: ExpenseData) => row.id,
        totalPages: 0,
        currentPage: 0,
        actionNode: productIdentifier ? (
          <AddExpenseButton
            key="add-expense-btn"
            productIdentifier={productIdentifier}
            productData={productData}
            setProductData={setProductData}
          />
        ) : undefined,
      }}
    />
  );
}