import { DepartmentSchema, DepartmentSectionSchema } from "../../../../../client";
import { DepartmentSectionCrud } from "../hooks/useDepartmentSectionCrud.tsx";
import { DepartmentSectionModalForm } from "../types/DepartmentModalForm.tsx";
import { useForm } from "@mantine/form";
import { Button, Flex, rem, TextInput } from "@mantine/core";
import DepartmentSelect from "./DepartmentSelect.tsx";

type Props = {
    departmentSectionsCrud: DepartmentSectionCrud;
    departmentSection?: DepartmentSectionSchema;
    allDepartments: DepartmentSchema[];
    closeModal: () => void;
}

const DepartmentSectionForm = ({
                                   departmentSectionsCrud,
                                   departmentSection,
                                   allDepartments,
                                   closeModal,
                               }: Props) => {
    const initialValues: DepartmentSectionModalForm = {
        name: departmentSection?.name ?? "",
        departmentId: departmentSection?.departmentId ?? null,
        parentDepartmentSectionId: departmentSection?.parentDepartmentSectionId ?? null,
    };

    const form = useForm<DepartmentSectionModalForm>({
        initialValues,
        validate: {
            name: name => !name && "Необходимо указать название",
        },
    });

    const isChanged = (): boolean => {
        return (
            initialValues.name !== form.values.name ||
            initialValues.departmentId !== form.values.departmentId ||
            initialValues.parentDepartmentSectionId !== form.values.parentDepartmentSectionId
        );
    };

    const onSubmit = () => {
        const sectionData = { ...departmentSection, ...form.values };
        const sectionName = form.values.name;
        if (!sectionName) return;
        if (departmentSection?.id) {
            if (isChanged()) {
                departmentSectionsCrud.onChange({
                    id: departmentSection.id,
                    name: form.values.name ?? "",
                    departmentId: form.values.departmentId,
                    parentDepartmentSectionId: form.values.parentDepartmentSectionId,
                });
            }
        } else {
            console.log(sectionData);
            departmentSectionsCrud.onCreate(sectionData);
        }
        closeModal();
    };

    return (
        <form onSubmit={form.onSubmit(() => onSubmit())}>
            <Flex
                direction={"column"}
                gap={rem(10)}
            >
                <TextInput
                    label={"Название"}
                    {...form.getInputProps("name")}
                />

                <DepartmentSelect
                    allDepartments={allDepartments}
                    form={form}
                    parentDepartmentSectionId={departmentSection?.id}
                />

                <Button
                    variant={"default"}
                    type={"submit"}
                >
                    Сохранить
                </Button>
            </Flex>
        </form>
    );
};

export default DepartmentSectionForm;
