import { FC } from "react";
import { Button, Flex } from "@mantine/core";
import { modals } from "@mantine/modals";
import { useFulfillmentBaseContext } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/contexts/FulfillmentBaseContext";

const ProductsActions: FC = () => {
    const { deal, dealProductsList, productsCrud, dealProductsCrud } =
        useFulfillmentBaseContext();

    const onCreateProductClick = () => {
        modals.openContextModal({
            modal: "productEditorModal",
            title: "Создание товара",
            withCloseButton: false,
            innerProps: {
                onCreate: productsCrud.onCreate,
                isEditing: false,
            },
        });
    };

    const onCreateDealProductClick = () => {
        const productIdsToExclude = dealProductsList.dealProducts.map(
            product => product.product.id
        );

        modals.openContextModal({
            modal: "dealProductEditorModal",
            title: "Добавление товара",
            withCloseButton: false,
            innerProps: {
                onCreate: values =>
                    dealProductsCrud.onCreate({ ...values, dealId: deal.id }),
                productIdsToExclude,
                isEditing: false,
                clientId: 0, // TODO add clients
            },
        });
    };

    return (
        <Flex
            w={"100%"}
            gap={"sm"}>
            <Button
                variant={"default"}
                fullWidth
                onClick={onCreateProductClick}>
                Создать товар
            </Button>
            <Button
                variant={"default"}
                fullWidth
                onClick={onCreateDealProductClick}>
                Добавить товар
            </Button>
        </Flex>
    );
};

export default ProductsActions;
