import BaseFormModal, { CreateEditFormProps } from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import { GetServiceKitSchema } from "../../../client";
import { ContextModalProps } from "@mantine/modals";
import { useForm } from "@mantine/form";
import { ServiceType } from "../../../shared/enums/ServiceType.ts";
import { TextInput } from "@mantine/core";
import ServiceTypeSelect from "../components/ServiceTypeSelect/ServiceTypeSelect.tsx";
import ServicesMultiselect from "../../../components/Selects/ServicesMultiselect/ServicesMultiselect.tsx";

type Props = CreateEditFormProps<GetServiceKitSchema>;
const ServiceKitModalForm = ({
                                 context,
                                 id,
                                 innerProps,
                             }: ContextModalProps<Props>) => {
    const isEditing = "element" in innerProps;
    const initialValues: Partial<GetServiceKitSchema> = isEditing ? innerProps.element : {
        name: "",
        serviceType: ServiceType.DEAL_SERVICE,
        services: [],
    };

    const form = useForm<Partial<GetServiceKitSchema>>(
        {
            initialValues,
        },
    );
    return (
        <BaseFormModal
            {...innerProps}
            form={form}
            closeOnSubmit
            onClose={() => context.closeContextModal(id)}
        >
            <BaseFormModal.Body>
                <>
                    <TextInput
                        label={"Название"}
                        placeholder={"Введите название набора услуг"}
                        {...form.getInputProps("name")}
                    />
                    <ServiceTypeSelect
                        label={"Тип услуг"}
                        placeholder={"Выберите тип услуг"}
                        {...form.getInputProps("serviceType")}
                    />
                    <ServicesMultiselect
                        label={"Услуги"}
                        placeholder={"Выберите услуги"}
                        filterBy={(service) => service.serviceType === form.values.serviceType}
                        groupBy={(service) => service.category.name}
                        {...form.getInputProps("services")}
                    />
                </>
            </BaseFormModal.Body>
        </BaseFormModal>
    );
};

export default ServiceKitModalForm;