"use client";

import { TableBuilder } from "@/components/TableBuilder";
import { useApp } from "@/context/app";
import { useGlobal } from "@/context/global";
import { useProjects } from "@/context/projects";
import { getProjectColumns } from "@/models/projects/tableColumns";
import { useEffect } from "react";
import { ProjectTableSkeletonButton } from "./skeleton/button";

type ProjectTableProps<TData, TValue> = {};
const ProjectTable = <TData, TValue>({}: ProjectTableProps<TData, TValue>) => {
  const { dict } = useGlobal();

  const { setHeader, activeSession } = useApp();
  const { permissions } = activeSession;

  const { list, count, filters, setFilters, fetchData } = useProjects();

  const columns = getProjectColumns(dict);

  useEffect(() => {
    setHeader({
      title: {
        link: "/projects",
        text: dict.pages.general.navigation.projects,
        path: [],
      },
    });

    return () => {
      setHeader(undefined);
    };
  }, []);

  return (
    <TableBuilder
      list={list}
      count={count}
      columns={columns}
      filters={filters}
      setFilters={setFilters}
      fetchData={fetchData}
      skeletonActions={
        <ProjectTableSkeletonButton list={list} permissions={permissions} />
      }
      hasConfigButton
      hasSearch
    />
  );
};

export { ProjectTable };