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;