"use client";

import { Flex, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ContextModalProps } from "@mantine/modals";
import {
    CreateServiceCategorySchema,
    ServiceCategorySchema,
    UpdateServiceCategorySchema,
} from "@/lib/client";
import BaseFormModal, {
    CreateEditFormProps,
} from "@/modals/base/BaseFormModal/BaseFormModal";

type Props = CreateEditFormProps<
    CreateServiceCategorySchema,
    UpdateServiceCategorySchema,
    ServiceCategorySchema
>;

const ServiceCategoryEditorModal = ({
    context,
    id,
    innerProps,
}: ContextModalProps<Props>) => {
    const initialValues = innerProps.isEditing
        ? innerProps.entity
        : {
              name: "",
              dealServiceRank: "",
              productServiceRank: "",
          };

    const form = useForm<Partial<ServiceCategorySchema>>({
        initialValues,
        validate: {
            name: name =>
                (!name || name.trim() === "") &&
                "Необходимо ввести название категории",
        },
    });

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

    return (
        <BaseFormModal
            {...innerProps}
            form={form}
            closeOnSubmit
            onClose={onClose}>
            <Flex
                gap={"xs"}
                direction={"column"}>
                <TextInput
                    placeholder={"Введите название категори"}
                    label={"Название категории"}
                    {...form.getInputProps("name")}
                />
            </Flex>
        </BaseFormModal>
    );
};

export default ServiceCategoryEditorModal;