import BaseFormModal, {CreateEditFormProps} from "../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
import {
    BarcodeTemplateAdditionalAttributeSchema,
    BarcodeTemplateAttributeSchema,
    BarcodeTemplateSchema
} from "../../../../client";
import {ContextModalProps} from "@mantine/modals";
import {useForm} from "@mantine/form";
import {Checkbox, Fieldset, Flex, rem, Textarea, TextInput} from "@mantine/core";
import BarcodeTemplateAttributeMultiselect
    from "../../components/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.tsx";
import BarcodeTemplateAdditionalFieldTable
    from "../../components/BarcodeTemplateAdditionalFieldTable/BarcodeTemplateAdditionalFieldTable.tsx";
import BarcodeTemplateSizeSelect from "../../components/BarcodeTemplateSizeSelect/BarcodeTemplateSizeSelect.tsx";

type Props = CreateEditFormProps<BarcodeTemplateSchema>
const BarcodeTemplateFormModal = ({
                                      context,
                                      id,
                                      innerProps
                                  }: ContextModalProps<Props>) => {
    const isEditing = 'onChange' in innerProps;
    const initialValues = isEditing ? innerProps.element : {
        name: "",
        isDefault: false,
        attributes: [] as Array<BarcodeTemplateAttributeSchema>,
        additionalAttributes: [] as Array<BarcodeTemplateAdditionalAttributeSchema>
    } as Partial<BarcodeTemplateSchema>;
    const form = useForm<Partial<BarcodeTemplateSchema>>({
        initialValues: initialValues,
        validate: {
            attributes: (attributes: Array<BarcodeTemplateAttributeSchema> | undefined) => attributes ? null : "Необходимо добавить хотя бы один атрибут",
            name: (name: string | undefined) => name && name.trim() !== '' ? null : "Необходимо ввести название шаблона",
        }
    })
    return (
        <BaseFormModal
            {...innerProps}
            closeOnSubmit
            form={form}

            onClose={() => context.closeContextModal(id)}
        >
            <BaseFormModal.Body>
                <>
                    <Fieldset legend={"Шаблон штрихкода"}>
                        <Flex direction={"column"} gap={rem(10)}>
                            <TextInput
                                label={'Название'}
                                placeholder={"Введите название шаблона"}
                                {...form.getInputProps('name')}
                            />
                            <BarcodeTemplateSizeSelect
                                label={"Размер"}
                                placeholder={"Выберите размер шаблона"}
                                {...form.getInputProps('size')}
                            />

                            <BarcodeTemplateAttributeMultiselect
                                label={"Стандартные атрибуты"}
                                placeholder={!form.values.attributes?.length ? "Выберите атрибуты" : undefined}
                                {...form.getInputProps('attributes')}
                            />
                            <BarcodeTemplateAdditionalFieldTable
                                {...form.getInputProps('additionalAttributes')}
                            />
                            <Checkbox
                                label={"Использовать как стандартный шаблон"}
                                checked={form.getInputProps('isDefault').value as boolean}
                                {...form.getInputProps('isDefault')}/>
                            <Textarea
                                label={"Дополнительное поле"}
                                placeholder={"Введите дополнительное поле"}
                                {...form.getInputProps('additionalField')}
                            />
                        </Flex>

                    </Fieldset>
                </>
            </BaseFormModal.Body>
        </BaseFormModal>
    )
}

export default BarcodeTemplateFormModal;