import { FC } from "react";
import { Stack } from "@mantine/core";
import { UseFormReturnType } from "@mantine/form";
import { ProductSchema } from "@/lib/client";
import BarcodeImageDropzone from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/components/BarcodeImageDropzone/BarcodeImageDropzone";
import ProductImageDropzone from "@/modules/dealModularEditorTabs/FulfillmentBase/shared/components/ProductImageDropzone/ProductImageDropzone";
import BaseFormInputProps from "@/utils/baseFormInputProps";

type Props = {
    form: UseFormReturnType<Partial<ProductSchema>>;
    productId: number;
    onUploaded: () => void;
};

const ImagesTab: FC<Props> = ({ form, productId, onUploaded }) => (
    <Stack>
        <ProductImageDropzone
            imageUrlInputProps={
                form.getInputProps("imageUrl") as BaseFormInputProps<string>
            }
            productId={productId}
            onUploaded={onUploaded}
        />
        <BarcodeImageDropzone
            imageUrlInputProps={
                form.getInputProps(
                    "barcodeImageUrl"
                ) as BaseFormInputProps<string>
            }
            productId={productId}
            onUploaded={onUploaded}
        />
    </Stack>
);

export default ImagesTab;
