import {GetServiceKitSchema} from "../../client";
import {ContextModalProps} from "@mantine/modals";
import {useState} from "react";
import {Button, Flex, rem} from "@mantine/core";
import ServicesKitSelect from "../../components/Selects/ServicesKitSelect/ServicesKitSelect.tsx";
import {notifications} from "../../shared/lib/notifications.ts";

type Props = {
    onSelect: (kit: GetServiceKitSchema) => void;
    serviceType: number;
}

const ServicesKitSelectModal = ({
                                    context,
                                    id,
                                    innerProps
                                }: ContextModalProps<Props>) => {
    const [kit, setKit] = useState<GetServiceKitSchema | undefined>();
    const onSelectClick = () => {
        if (!kit) {
            notifications.error({message: "Выберите набор услуг"});
            return;
        }
        innerProps.onSelect(kit);
        context.closeContextModal(id);
    }
    return (
        <Flex
            gap={rem(10)}
            direction={"column"}>
            <Flex>
                <ServicesKitSelect
                    w={"100%"}
                    label={"Набор услуг"}
                    placeholder={"Выберите набор услуг"}
                    value={kit}
                    onChange={setKit}
                    filterBy={item => item.serviceType === innerProps.serviceType}
                />
            </Flex>
            <Flex justify={"flex-end"} gap={rem(10)}>
                <Button
                    variant={"subtle"}
                    onClick={() => context.closeContextModal(id)}
                >
                    Отменить
                </Button>
                <Button
                    onClick={onSelectClick}
                    variant={"default"}
                >
                    Добавить
                </Button>

            </Flex>
        </Flex>
    )
}

export default ServicesKitSelectModal;