import { FC, useCallback } from "react";
import { IconMoodSad } from "@tabler/icons-react";
import { Group, Pagination, Stack, Text } from "@mantine/core";
import useDealsTableColumns from "@/app/deals/components/desktop/DealsTable/useDealsTableColumns";
import { useDealsContext } from "@/app/deals/contexts/DealsContext";
import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
import BaseTable from "@/components/ui/BaseTable/BaseTable";
import { useDrawersContext } from "@/drawers/DrawersContext";
import { DealSchema } from "@/lib/client";

const DealsTable: FC = () => {
    const { selectedProject } = useProjectsContext();
    const { deals, paginationInfo, page, setPage, sortingForm, dealsCrud } =
        useDealsContext();
    const { openDrawer } = useDrawersContext();

    const onEditClick = useCallback(
        (deal: DealSchema) => {
            openDrawer({
                key: "dealEditorDrawer",
                props: {
                    value: deal,
                    onChange: deal => dealsCrud.onUpdate(deal.id, deal),
                    onDelete: dealsCrud.onDelete,
                    project: selectedProject,
                },
            });
        },
        [openDrawer, dealsCrud]
    );

    const columns = useDealsTableColumns({ onEditClick });

    return (
        <Stack
            gap={"xs"}
            h={"100%"}>
            <BaseTable
                records={[...deals]}
                columns={columns}
                sortStatus={{
                    columnAccessor: sortingForm.values.sortingField ?? "",
                    direction: sortingForm.values.sortingDirection,
                }}
                onSortStatusChange={sorting => {
                    sortingForm.setFieldValue(
                        "sortingField",
                        sorting.columnAccessor
                    );
                    sortingForm.setFieldValue(
                        "sortingDirection",
                        sorting.direction
                    );
                }}
                emptyState={
                    <Group
                        align={"center"}
                        gap={"xs"}>
                        <Text>Нет сделок</Text>
                        <IconMoodSad />
                    </Group>
                }
                groups={undefined}
                style={{
                    height: "100%",
                }}
            />
            {paginationInfo && paginationInfo.totalPages > 1 && (
                <Group justify={"flex-end"}>
                    <Pagination
                        withEdges
                        total={paginationInfo.totalPages}
                        value={page}
                        onChange={setPage}
                    />
                </Group>
            )}
        </Stack>
    );
};

export default DealsTable;