import { BaseTable } from "../../../../components/BaseTable/BaseTable.tsx";
import { ResidualProductSchema, ResiduesService } from "../../../../client";
import { ActionIcon, Flex, Tooltip } from "@mantine/core";
import { IconEdit, IconTrash } from "@tabler/icons-react";
import { MRT_TableOptions } from "mantine-react-table";
import { notifications } from "../../../../shared/lib/notifications.ts";
import { modals } from "@mantine/modals";
import { useResiduesContext } from "../../contexts/ResiduesContext.tsx";
import useResiduesTableColumns from "../../hooks/residuesTableColumns.tsx";


type Props = {
    items: ResidualProductSchema[];
}

const ResidualProductsTable = ({ items }: Props) => {
    const columns = useResiduesTableColumns<ResidualProductSchema>();
    const { selectedClient, refetchClient } = useResiduesContext();

    const onDeleteClick = (residualProduct: ResidualProductSchema) => {
        ResiduesService.deleteResidualProduct({
            residualProductId: residualProduct.id,
        })
            .then(({ ok, message }) => {
                notifications.guess(ok, { message });
                refetchClient();
            })
            .catch(err => console.log(err));
    };

    const onEditClick = (residualProduct: ResidualProductSchema) => {
        if (!selectedClient) return;
        modals.openContextModal({
            modal: "residualProductModal",
            title: "Редактирование товара на паллете",
            withCloseButton: false,
            innerProps: {
                client: selectedClient,
                updateOnSubmit: refetchClient,
                residuesData: {
                    residualProductId: residualProduct.id,
                    product: residualProduct.product,
                    quantity: residualProduct.quantity,
                },
            },
        });
    };

    return (
        <BaseTable
            data={items}
            columns={columns}
            restProps={
                {
                    enableSorting: false,
                    enableColumnActions: false,
                    enableRowActions: true,
                    enableRowNumbers: 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<ResidualProductSchema>
            }
        />
    );
};

export default ResidualProductsTable;
