"use client";

import { Checkbox, Flex, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ContextModalProps } from "@mantine/modals";
import BarcodeTemplateAttributeMultiselect from "@/app/barcode-templates/components/shared/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect";
import BarcodeTemplateSizeSelect from "@/app/barcode-templates/components/shared/BarcodeTemplateSizeSelect/BarcodeTemplateSizeSelect";
import {
    BarcodeTemplateSchema,
    CreateBarcodeTemplateSchema,
    UpdateBarcodeTemplateSchema,
} from "@/lib/client";
import BaseFormModal, {
    CreateEditFormProps,
} from "@/modals/base/BaseFormModal/BaseFormModal";

type Props = CreateEditFormProps<
    BarcodeTemplateSchema,
    CreateBarcodeTemplateSchema,
    UpdateBarcodeTemplateSchema
>;

const BarcodeTemplateEditorModal = ({
    context,
    id,
    innerProps,
}: ContextModalProps<Props>) => {
    const initialValues = innerProps.isEditing
        ? innerProps.entity
        : ({
              name: "",
              isDefault: false,
              attributes: [],
          } as Partial<CreateBarcodeTemplateSchema>);

    const form = useForm({
        initialValues,
        validate: {
            attributes: attributes =>
                !attributes && "Необходимо добавить хотя бы один атрибут",
            name: name =>
                !name ||
                (name.trim() === "" && "Необходимо ввести название шаблона"),
            size: size => !size && "Необходимо выбрать размер шаблона",
        },
    });

    return (
        <BaseFormModal
            {...innerProps}
            closeOnSubmit
            form={form}
            onClose={() => context.closeContextModal(id)}>
            <Flex
                direction={"column"}
                gap={"md"}>
                <TextInput
                    label={"Название"}
                    placeholder={"Введите название шаблона"}
                    {...form.getInputProps("name")}
                />
                <BarcodeTemplateSizeSelect
                    label={"Размер"}
                    placeholder={"Выберите размер шаблона"}
                    {...form.getInputProps("size")}
                />
                <BarcodeTemplateAttributeMultiselect
                    label={"Стандартные атрибуты"}
                    placeholder={
                        !form.values.attributes?.length
                            ? "Выберите атрибуты"
                            : undefined
                    }
                    {...form.getInputProps("attributes")}
                />
                <Checkbox
                    label={"Использовать по умолчанию"}
                    {...form.getInputProps("isDefault", {
                        type: "checkbox",
                    })}
                />
            </Flex>
        </BaseFormModal>
    );
};

export default BarcodeTemplateEditorModal;
