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 AddDealServiceButton: FC<Props> = props => {
    const { dealServicesList, dealServicesCrud, deal } =
        useFulfillmentBaseContext();

    const onCreateClick = () => {
        const serviceIdsToExclude = dealServicesList.dealServices.map(
            service => service.service.id
        );
        modals.openContextModal({
            modal: "dealServiceEditorModal",
            innerProps: {
                onCreate: values =>
                    dealServicesCrud.onCreate({ ...values, dealId: deal.id }),
                serviceIdsToExclude,
                isEditing: false,
            },
            withCloseButton: false,
        });
    };

    return (
        <InlineButton
            {...props}
            onClick={onCreateClick}>
            <IconPlus />
            <Text>Добавить услугу</Text>
        </InlineButton>
    );
};

export default AddDealServiceButton;
