import { DataTableColumn } from "mantine-datatable";
import { ShippingProductSchema, ShippingService } from "../../../../../client";
import { ActionIcon, Flex, Tooltip } from "@mantine/core";
import { IconEdit, IconTrash } from "@tabler/icons-react";
import { notifications } from "../../../../../shared/lib/notifications.ts";
import { modals } from "@mantine/modals";
import useUpdateCard from "./useUpdateCard.tsx";
import { useCardPageContext } from "../../../../../pages/CardsPage/contexts/CardPageContext.tsx";

const useShippingTableColumns = () => {
    const { update } = useUpdateCard();
    const { selectedCard: card } = useCardPageContext();

    const onDeleteClick = (shippingProduct: ShippingProductSchema) => {
        ShippingService.deleteShippingProduct({
            shippingProductId: shippingProduct.id,
        })
            .then(({ ok, message }) => {
                notifications.guess(ok, { message });
                update();
            })
            .catch(err => console.log(err));
    };

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

    return [
        {
            title: "Название",
            accessor: "product.name",
            render: shippingProduct => shippingProduct.product?.name ?? "-",
        },
        {
            title: "Артикул",
            accessor: "product.article",
            render: shippingProduct => shippingProduct.product?.article ?? "-",
        },
        {
            title: "Размер",
            accessor: "product.size",
            render: shippingProduct => shippingProduct.product?.size ?? "-",
        },
        {
            title: "Количество",
            accessor: "quantity",
        },
        {
            accessor: "actions",
            title: "",
            width: "0%",
            render: shippingProduct => (
                <Flex gap="md">
                    <Tooltip label="Удалить">
                        <ActionIcon
                            onClick={() => onDeleteClick(shippingProduct)}
                            variant={"default"}>
                            <IconTrash />
                        </ActionIcon>
                    </Tooltip>
                    <Tooltip label="Редактировать">
                        <ActionIcon
                            onClick={() => onEditClick(shippingProduct)}
                            variant={"default"}>
                            <IconEdit />
                        </ActionIcon>
                    </Tooltip>
                </Flex>
            ),
        },
    ] as DataTableColumn<ShippingProductSchema>[];
};

export default useShippingTableColumns;
