"use client";

import { useState } from "react";
import { Flex } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ContextModalProps } from "@mantine/modals";
import {
    BarcodeTemplateSchema,
    CreateProductSchema,
    ProductSchema,
    UpdateProductSchema,
} from "@/lib/client";
import BaseFormModal, {
    CreateEditFormProps,
} from "@/modals/base/BaseFormModal/BaseFormModal";
import CharacteristicsTab from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/modals/ProductEditorModal/components/CharacteristicsTab";
import ImagesTab from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/modals/ProductEditorModal/components/ImagesTab";
import ProductEditorSegmentedControl, {
    ProductEditorTab,
} from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/modals/ProductEditorModal/components/ProductEditorSegmentedControl";

type Props = CreateEditFormProps<
    CreateProductSchema,
    UpdateProductSchema,
    ProductSchema
> & {
    clientId: number;
    refetchProducts: () => void;
};

type ProductForm = Partial<
    ProductSchema & {
        barcodeTemplate: BarcodeTemplateSchema;
    }
>;

const ProductEditorModal = ({
    context,
    id,
    innerProps,
}: ContextModalProps<Props>) => {
    const [editorTab, setEditorTab] = useState<ProductEditorTab>(
        ProductEditorTab.CHARACTERISTICS
    );
    const isEditing = "entity" in innerProps;

    const initialValues: ProductForm = isEditing
        ? innerProps.entity!
        : {
              name: "",
              article: "",
              factoryArticle: "",
              brand: "",
              composition: "",
              color: "",
              size: "",
              additionalInfo: "",
              clientId: innerProps.clientId,
              barcodeTemplate: undefined,
              barcodeTemplateId: undefined,
          };

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

    const imageTab = isEditing && (
        <ImagesTab
            form={form}
            productId={innerProps.entity.id}
            onUploaded={innerProps.refetchProducts}
        />
    );

    return (
        <BaseFormModal
            {...innerProps}
            form={form}
            closeOnSubmit
            actionsEnabled={editorTab === ProductEditorTab.CHARACTERISTICS}
            onClose={() => context.closeContextModal(id)}>
            <Flex
                gap={"xs"}
                direction={"column"}>
                {isEditing && (
                    <ProductEditorSegmentedControl
                        value={editorTab}
                        onChange={setEditorTab}
                    />
                )}
                {editorTab === ProductEditorTab.CHARACTERISTICS ? (
                    <CharacteristicsTab form={form} />
                ) : (
                    imageTab
                )}
            </Flex>
        </BaseFormModal>
    );
};
export default ProductEditorModal;
