"use client";

import { TableBuilder } from "@/components/TableBuilder";
import { useTableFilters } from "@/components/TableBuilder/hooks";
import { useApp } from "@/context/app";
import { useGlobal } from "@/context/global";
import { useUsersSocket } from "@/hooks/socket/users";
import getUserColumns from "@/models/user/userColumns";
import { fetchAllUsers } from "@/services/users";
import { useEffect } from "react";
import { UsersTableSkeletonButton } from "../skeleton";

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

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

  const { setHeader } = useApp();

  const { list, count, filters, setFilters, setList, fetchData } =
    useTableFilters({
      id: "users",
      searchFields: ["name", "email"],
      fetch: fetchAllUsers,
    });

  const columns = getUserColumns(dict);

  useUsersSocket({ list, setList, fetchData });

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

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

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

export { UserTable };