import useShippingTableColumns from "../hooks/shippingTableColumns.tsx";
import { BaseTable } from "../../../../../components/BaseTable/BaseTable.tsx";
import { BoxSchema, ShippingService } from "../../../../../client";
import { ActionIcon, Flex, Tooltip } from "@mantine/core";
import { IconEdit, IconTrash } from "@tabler/icons-react";
import { MRT_TableOptions } from "mantine-react-table";
import { modals } from "@mantine/modals";
import { useCardPageContext } from "../../../contexts/CardPageContext.tsx";
import useUpdateCard from "../hooks/useUpdateCard.tsx";
import { notifications } from "../../../../../shared/lib/notifications.ts";


type Props = {
    items: BoxSchema[];
}

const BoxesTable = ({ items }: Props) => {
    const columns = useShippingTableColumns<BoxSchema>({ isBox: true });
    const { update } = useUpdateCard();
    const { selectedCard: card } = useCardPageContext();

    const onDeleteClick = (box: BoxSchema) => {
        ShippingService.deleteBox({
            boxId: box.id,
        })
            .then(({ ok, message }) => {
                notifications.guess(ok, { message });
                if (ok) update();
            })
            .catch(err => console.log(err));
    };

    const onEditClick = (box: BoxSchema) => {
        if (!card) return;
        modals.openContextModal({
            modal: "shippingProductModal",
            title: "Редактирование короба",
            withCloseButton: false,
            innerProps: {
                card,
                updateOnSubmit: update,
                isBox: true,
                shippingData: {
                    boxId: box.id,
                    productId: box.product?.id,
                    quantity: box.quantity,
                },
            },
        });
    };

    return (
        <BaseTable
            data={items}
            columns={columns}
            restProps={
                {
                    enableSorting: false,
                    enableColumnActions: false,
                    enableRowActions: true,
                    positionActionsColumn: "last",
                    renderRowActions: ({ row }) => (
                        <Flex gap="md">
                            <Tooltip label="Удалить">
                                <ActionIcon
                                    onClick={() => onDeleteClick(row.original)}
                                    variant={"default"}>
                                    <IconTrash />
                                </ActionIcon>
                            </Tooltip>
                            <Tooltip label="Редактировать">
                                <ActionIcon
                                    onClick={() => onEditClick(row.original)}
                                    variant={"default"}>
                                    <IconEdit />
                                </ActionIcon>
                            </Tooltip>
                        </Flex>
                    ),
                } as MRT_TableOptions<BoxSchema>
            }
        />
    );
};

export default BoxesTable;
