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, NumberInput, rem, TextInput} from "@mantine/core";
import {IconX} from "@tabler/icons-react";
import BarcodeTemplateAttributeMultiselect
    from "../../components/BarcodeTemplateAttributeMultiselect/BarcodeTemplateAttributeMultiselect.tsx";
import BarcodeTemplateAdditionalFieldTable
    from "../../components/BarcodeTemplateAdditionalFieldTable/BarcodeTemplateAdditionalFieldTable.tsx";

type Props = CreateEditFormProps<BarcodeTemplateSchema>
const BarcodeTemplateFormModal = ({
                                      context,
                                      id,
                                      innerProps
                                  }: ContextModalProps<Props>) => {
    const isEditing = 'onChange' in innerProps;
    const initialValues = isEditing ? innerProps.element : {
        name: "",
        width: undefined,
        height: undefined,
        isDefault: false,
        attributes: [] as Array<BarcodeTemplateAttributeSchema>,
        additionalAttributes: [] as Array<BarcodeTemplateAdditionalAttributeSchema>
    } as Partial<BarcodeTemplateSchema>;
    const form = useForm<Partial<BarcodeTemplateSchema>>({
        initialValues: initialValues,
        validate: {
            width: (width: number | undefined) => width && width > 0 ? null : "Ширина должна быть больше 0",
            height: (height: number | undefined) => height && height > 0 ? null : "Высота должна быть больше 0",
            attributes: (attributes: Array<BarcodeTemplateAttributeSchema> | undefined) => attributes && attributes.length > 0 ? null : "Необходимо добавить хотя бы один атрибут",
            name: (name: string | undefined) => name && name.trim() !== '' ? null : "Необходимо ввести название шаблона",
        }
    })
    console.log(form.values.additionalAttributes);
    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')}
                            />
                            <Flex gap={10} align={"center"}>
                                <NumberInput
                                    hideControls
                                    label={'Ширина'}
                                    placeholder={"Ширина в мм"}
                                    {...form.getInputProps('width')}
                                />
                                <IconX/>
                                <NumberInput
                                    hideControls
                                    label={'Высота'}
                                    placeholder={"Высота в мм"}
                                    {...form.getInputProps('height')}
                                />
                            </Flex>
                            <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')}/>
                        </Flex>

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

export default BarcodeTemplateFormModal;