import { useCardPageContext } from "../../../../../pages/CardsPage/contexts/CardPageContext.tsx";
import { BaseTable } from "../../../../../components/BaseTable/BaseTable.tsx";
import useEmployeeTableColumns from "../hooks/useEmployeesTableColumns.tsx";
import { ActionIcon, Flex, Tooltip } from "@mantine/core";
import { IconTrash } from "@tabler/icons-react";
import { MRT_TableOptions } from "mantine-react-table";
import { CardEmployeesSchema } from "../../../../../client";
import useEmployeesTab from "../hooks/useEmployeesTab.tsx";


const EmployeesTable = () => {
    const { selectedCard: card } = useCardPageContext();
    const columns = useEmployeeTableColumns();
    const { onUnassignEmployeeClick } = useEmployeesTab();

    return (
        <BaseTable
            data={card?.employees}
            columns={columns}
            restProps={
                {
                    enableSorting: false,
                    enableColumnActions: false,
                    enableRowActions: true,
                    renderRowActions: ({ row }) => (
                        <Flex gap="md">
                            <Tooltip label="Удалить">
                                <ActionIcon
                                    onClick={() => onUnassignEmployeeClick(row.original)}
                                    variant={"default"}>
                                    <IconTrash />
                                </ActionIcon>
                            </Tooltip>
                        </Flex>
                    ),
                } as MRT_TableOptions<CardEmployeesSchema>
            }
        />
    );
};

export default EmployeesTable;
