"use client";

import { Fieldset, Flex, rem, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ContextModalProps } from "@mantine/modals";
import {
    CreateProductSchema,
    ProductSchema,
    UpdateProductSchema,
} from "@/lib/client";
import BaseFormModal, {
    CreateEditFormProps,
} from "@/modals/base/BaseFormModal/BaseFormModal";
import ProductImageDropzone from "@/modules/dealModularEditorTabs/FulfillmentBase/desktop/components/ProductImageDropzone/ProductImageDropzone";
import BaseFormInputProps from "@/utils/baseFormInputProps";

type Props = CreateEditFormProps<
    CreateProductSchema,
    UpdateProductSchema,
    ProductSchema
>;

const ProductEditorModal = ({
    context,
    id,
    innerProps,
}: ContextModalProps<Props>) => {
    const isEditing = "entity" in innerProps;

    const initialValues: Partial<ProductSchema> = isEditing
        ? innerProps.entity!
        : {
              name: "",
              article: "",
              factoryArticle: "",
              brand: "",
              composition: "",
              color: "",
              size: "",
              additionalInfo: "",
          };

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

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

    return (
        <BaseFormModal
            {...innerProps}
            form={form}
            closeOnSubmit
            onClose={onClose}>
            <Flex
                gap={rem(10)}
                direction={"column"}>
                <Fieldset legend={"Основные характеристики"}>
                    <TextInput
                        placeholder={"Введите название товара"}
                        label={"Название товара"}
                        {...form.getInputProps("name")}
                    />
                    <TextInput
                        placeholder={"Введите артикул"}
                        label={"Артикул"}
                        {...form.getInputProps("article")}
                    />
                    <TextInput
                        placeholder={"Введите складской артикул"}
                        label={"Складской артикул"}
                        {...form.getInputProps("factoryArticle")}
                    />
                </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>
                {isEditing && (
                    <ProductImageDropzone
                        imageUrlInputProps={
                            form.getInputProps(
                                "imageUrl"
                            ) as BaseFormInputProps<string>
                        }
                        productId={innerProps.entity.id}
                    />
                )}
            </Flex>
        </BaseFormModal>
    );
};
export default ProductEditorModal;
