"use client";

import { Flex } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ContextModalProps } from "@mantine/modals";
import { ServicesKitSchema } from "@/lib/client";
import BaseFormModalActions from "@/modals/base/BaseFormModal/BaseFormModalActions";
import ServicesKitSelect from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/modals/ServicesKitSelectModal/components/ServicesKitSelect";

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

type ServicesKitForm = {
    servicesKit: ServicesKitSchema;
};

const ServicesKitSelectModal = ({
    context,
    id,
    innerProps,
}: ContextModalProps<Props>) => {
    const form = useForm<ServicesKitForm>({
        validate: {
            servicesKit: servicesKit => !servicesKit && "Выберите сервис",
        },
    });

    const onClose = () => context.closeContextModal(id);

    const onSubmit = (values: ServicesKitForm) => {
        innerProps.onSelect(values.servicesKit);
        onClose();
    };

    return (
        <form onSubmit={form.onSubmit(onSubmit)}>
            <Flex
                gap={"xs"}
                direction={"column"}>
                <Flex>
                    <ServicesKitSelect
                        w={"100%"}
                        {...form.getInputProps("servicesKit")}
                        filterBy={item =>
                            item.serviceType === innerProps.serviceType
                        }
                    />
                </Flex>
                <BaseFormModalActions onClose={onClose} />
            </Flex>
        </form>
    );
};

export default ServicesKitSelectModal;
