"use client";

import { FC } from "react";
import { useClientsTableColumns } from "@/app/clients/components/shared/ClientsTable/columns";
import { useClientsContext } from "@/app/clients/contexts/ClientsContext";
import useClientsActions from "@/app/clients/hooks/utils/useClientsActions";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import { useDrawersContext } from "@/drawers/DrawersContext";
import useIsMobile from "@/hooks/utils/useIsMobile";
import { ClientSchema } from "@/lib/client";

const ClientsTable: FC = () => {
    const isMobile = useIsMobile();
    const { modulesSet } = useProjectsContext();
    const { clientsCrud, clients } = useClientsContext();
    const { onUpdateClick } = useClientsActions();
    const { openDrawer } = useDrawersContext();

    const onOpenMarketplacesList = (client: ClientSchema) => {
        openDrawer({
            key: "clientMarketplaceDrawer",
            props: { client },
        });
    };

    const columns = useClientsTableColumns({
        onDelete: clientsCrud.onDelete,
        onChange: onUpdateClick,
        onOpenMarketplacesList,
        modulesSet,
    });

    return (
        <BaseTable
            withTableBorder
            records={clients}
            columns={columns}
            verticalSpacing={"md"}
            mx={isMobile ? "xs" : 0}
            groups={undefined}
        />
    );
};

export default ClientsTable;