import { IconEdit } from "@tabler/icons-react";
import { MRT_TableOptions } from "mantine-react-table";
import { ActionIcon, Group, Pagination, Stack, Tooltip } from "@mantine/core";
import useDealsTableColumns from "@/app/deals/components/desktop/DealsTable/useDealsTableColumns";
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import { useDrawersContext } from "@/drawers/DrawersContext";
import { DealSchema } from "@/lib/client";

const DealsTable = () => {
    const { deals, paginationInfo, page, setPage, dealsCrud } =
        useDealsContext();
    const { openDrawer } = useDrawersContext();
    const columns = useDealsTableColumns();
    const defaultSorting = [{ id: "createdAt", desc: false }];

    const onEditDeal = (deal: DealSchema) => {
        openDrawer({
            key: "dealEditorDrawer",
            props: {
                deal,
                dealsCrud,
            },
        });
    };

    return (
        <Stack
            gap={"xs"}
            h={"calc(100vh - 125px)"}>
            <BaseTable
                data={deals}
                columns={columns}
                restProps={
                    {
                        enableSorting: true,
                        enableColumnActions: false,
                        paginationDisplayMode: "pages",
                        initialState: {
                            sorting: defaultSorting,
                        },
                        mantinePaginationProps: {
                            showRowsPerPage: false,
                        },
                        enableStickyHeader: true,
                        enableStickyFooter: true,
                        enableRowActions: true,
                        renderRowActions: ({ row }) => (
                            <Tooltip label="Редактировать">
                                <ActionIcon
                                    bdrs={"md"}
                                    size={"lg"}
                                    onClick={() => onEditDeal(row.original)}
                                    variant={"default"}>
                                    <IconEdit />
                                </ActionIcon>
                            </Tooltip>
                        ),
                    } as MRT_TableOptions<DealSchema>
                }
            />
            <Group justify={"flex-end"}>
                <Pagination
                    withEdges
                    total={paginationInfo.totalPages}
                    value={page}
                    onChange={setPage}
                />
            </Group>
        </Stack>
    );
};

export default DealsTable;