import {ContextModalProps} from "@mantine/modals";
import {Button, Fieldset, Flex, rem, TagsInput, TextInput} from "@mantine/core";
import {useForm} from "@mantine/form";
import {BaseProduct, CreateProductRequest} from "../../types.ts";
import {ProductSchema} from "../../../../client";
import BarcodeTemplateSelect from "../../../../components/Selects/BarcodeTemplateSelect/BarcodeTemplateSelect.tsx";
import ImageDropzone from "../../../../components/ImageDropzone/ImageDropzone.tsx";
import {BaseFormInputProps} from "../../../../types/utils.ts";

type CreateProps = {
    clientId: number;
    onCreate: (values: CreateProductRequest) => void
}

type EditProps = {
    product: ProductSchema,
    onChange: (values: ProductSchema) => void
}
type Props = CreateProps | EditProps;


const CreateProductModal = ({
                                context,
                                id,
                                innerProps,
                            }: ContextModalProps<Props>) => {
    const isEditProps = 'product' in innerProps;
    const isCreatingProps = 'clientId' in innerProps;
    const initialValues: Omit<ProductSchema, 'id'> = isEditProps ? innerProps.product : {
        name: '',
        article: '',
        barcodes: [],
        clientId: innerProps.clientId
    };
    const form = useForm<Omit<ProductSchema, 'id'>>({
        initialValues: initialValues,
        validate: {
            name: (name) => name.trim() !== '' ? null : "Необходимо ввести название товара",
            // article: (article) => article.trim() !== '' ? null : "Необходимо ввести артикул",
        }
    })
    const onCancelClick = () => {
        context.closeContextModal(id);
    }
    const onSubmit = (values: BaseProduct) => {
        if (isEditProps) innerProps.onChange({...innerProps.product, ...values})
        if (isCreatingProps) {
            innerProps.onCreate({...values, clientId: innerProps.clientId});
            form.reset();
        }
    }
    return (
        <>
            <form onSubmit={form.onSubmit((values) => onSubmit(values))}>
                <Flex gap={rem(10)} direction={"column"}>
                    <Fieldset legend={"Основные характеристики"}>
                        <TextInput
                            placeholder={"Введите название товара"}
                            label={"Название товара"}
                            {...form.getInputProps('name')}
                        />
                        <TextInput
                            placeholder={"Введите артикул"}
                            label={"Артикул"}
                            {...form.getInputProps('article')}
                        />
                        <TagsInput
                            placeholder={!form.values.barcodes.length ? "Добавьте штрихкоды к товару" : ""}
                            label={"Штрихкоды"}
                            {...form.getInputProps('barcodes')}
                        />
                        <BarcodeTemplateSelect
                            placeholder={"Выберите шаблон штрихкода"}
                            label={"Шаблон штрихкода"}
                            {...form.getInputProps('barcodeTemplate')}
                        />
                    </Fieldset>
                    <Fieldset legend={"Дополнительные характеристики"}>
                        <TextInput
                            placeholder={"Введите бренд"}
                            label={"Бренд"}
                            {...form.getInputProps('brand')}
                        />
                        <TextInput
                            placeholder={"Введите состав"}
                            label={"Состав"}
                            {...form.getInputProps('composition')}
                        />
                        <TextInput
                            placeholder={"Введите цвет"}
                            label={"Цвет"}
                            {...form.getInputProps('color')}
                        />
                        <TextInput
                            placeholder={"Введите размер"}
                            label={"Размер"}
                            {...form.getInputProps('size')}
                        />
                        <TextInput
                            placeholder={"Введите доп. информацию"}
                            label={"Доп. информация"}
                            {...form.getInputProps('additionalInfo')} />
                    </Fieldset>

                    {isEditProps &&
                        // <Fieldset legend={"Изображение"}>
                        <ImageDropzone
                            imageUrlInputProps={form.getInputProps('imageUrl') as BaseFormInputProps<string>}
                            productId={innerProps.product.id}
                        />
                        // </Fieldset>
                    }
                    <Flex justify={"flex-end"} mt={rem(5)} gap={rem(10)}>
                        <Button onClick={() => onCancelClick()} variant={"subtle"}>Отменить</Button>
                        {isEditProps ?
                            <Button
                                onClick={() => context.closeContextModal(id)}
                                type={"submit"}
                                variant={"default"}
                            >Сохранить и закрыть</Button> :
                            <>
                                <Button
                                    onClick={() => context.closeContextModal(id)}
                                    type={"submit"}
                                    variant={"default"}
                                >Создать и закрыть</Button>
                                {/*<Button*/}
                                {/*    type={"submit"}*/}
                                {/*    variant={"default"}*/}
                                {/*>Создать</Button>*/}
                            </>}
                    </Flex>
                </Flex>
            </form>
        </>
    )
};
export default CreateProductModal;