import { FC } from "react";
import { IconPlus } from "@tabler/icons-react";
import { ButtonProps, Text } from "@mantine/core";
import { modals } from "@mantine/modals";
import InlineButton from "@/components/ui/InlineButton/InlineButton";
import { useFulfillmentBaseContext } from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/contexts/FulfillmentBaseContext";

type Props = ButtonProps;

const AddDealProductButton: FC<Props> = props => {
    const { dealProductsList, dealProductsCrud, deal } =
        useFulfillmentBaseContext();

    const onCreateClick = () => {
        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 (
        <InlineButton
            {...props}
            onClick={onCreateClick}>
            <IconPlus />
            <Text>Добавить товар</Text>
        </InlineButton>
    );
};

export default AddDealProductButton;
