import MonthlyCalendar from "@/components/MonthlyCalender";
import MonthlyCalendarV2 from "@/components/MonthlyCalendarV2";
import DesktopCalendar from "@/components/DesktopCalender";
import ProductImageGrid from "./ProductImageGrid";
import YearlyCalendar from "@/components/YearlyCalendar";
import { ImageMetaMap } from "../types/product";
import DesktopCalenderV2 from "@/components/DesktopCalenderV2";

type ProductDesignAreaProps = {
    productId: string | number;
    product: any;

    isNewCalendar: boolean;
    fetchedImages: any[];
    setFetchedImages: (value: any) => void;

    selectedEffect: string;
    selectedVariation: any;
    backgroundColor: string;
    effects: any;
    isImgUploading: (img: any) => boolean;

    handleDeleteImage: (imageId: number) => void;

    visibleImages: any[];
    isRegularPhotos: boolean;
    imageMeta: ImageMetaMap;
    htmlDir: string;
    imageTexts: { [key: string]: string };

    selectedFrame: number | null;
    frames: any[];

    getCardWrapperStyle: (img: any) => React.CSSProperties;
    getFixedPreviewBoxStyle: (img: any) => React.CSSProperties;
    hasPreviewText: () => boolean;

    uploadSingleImage: (img: any, retry?: boolean) => Promise<boolean>;
    openCropModal: (img: any) => void;

    getImageQuantity: (imageId: number | string) => number;
    increaseQuantity: (imageId: any) => void;
    decreaseQuantity: (imageId: any) => void;
    updateImageText: (imageId: number | string, text: string) => void;

    onOpenUpload: () => void;
    yearlyQty: number;
    increaseYearlyQty: () => void;
    decreaseYearlyQty: () => void;

    calendarUploadSlotIndex: number | null;
    setCalendarUploadSlotIndex: (value: number | null) => void;
};

export default function ProductDesignArea({
                                              productId,
                                              product,

                                              isNewCalendar,
                                              fetchedImages,
                                              setFetchedImages,

                                              selectedEffect,
                                              selectedVariation,
                                              backgroundColor,
                                              effects,
                                              isImgUploading,

                                              handleDeleteImage,

                                              visibleImages,
                                              isRegularPhotos,
                                              imageMeta,
                                              htmlDir,
                                              imageTexts,

                                              selectedFrame,
                                              frames,

                                              getCardWrapperStyle,
                                              getFixedPreviewBoxStyle,
                                              hasPreviewText,

                                              uploadSingleImage,
                                              openCropModal,

                                              getImageQuantity,
                                              increaseQuantity,
                                              decreaseQuantity,
                                              updateImageText,
                                              onOpenUpload,
                                              yearlyQty,
                                              increaseYearlyQty,
                                              decreaseYearlyQty,
                                              calendarUploadSlotIndex,
                                              setCalendarUploadSlotIndex,

                                          }: ProductDesignAreaProps) {

    if (Number(productId) === 1) {
        return (
            <YearlyCalendar
                removeImage={(id: string) => handleDeleteImage(Number(id))}
                images={isNewCalendar ? [] : fetchedImages}
                setImages={setFetchedImages}
                selectedEffect={selectedEffect}
                backgroundColor={backgroundColor}
                effects={effects}
                isUploadingImage={isImgUploading}
                onOpenUpload={(slotIndex?: number) => {
                    setCalendarUploadSlotIndex(typeof slotIndex === "number" ? slotIndex : null);
                    onOpenUpload();
                }}
                onEditImage={openCropModal}
                qty={yearlyQty}
                increaseQty={increaseYearlyQty}
                decreaseQty={decreaseYearlyQty}
            />
        );
    }

    if (Number(productId) === 5) {
        return (
            <MonthlyCalendarV2
                removeImage={(id: string) => handleDeleteImage(Number(id))}
                images={isNewCalendar ? [] : fetchedImages}
                setImages={setFetchedImages}
                selectedEffect={selectedEffect}
                backgroundColor={backgroundColor}
                effects={effects}
                isUploadingImage={isImgUploading}
                onOpenUpload={(slotIndex?: number) => {
                    setCalendarUploadSlotIndex(typeof slotIndex === "number" ? slotIndex : null);
                    onOpenUpload();
                }}
                onEditImage={openCropModal}
                qty={yearlyQty}
                increaseQty={increaseYearlyQty}
                decreaseQty={decreaseYearlyQty}
                imageTexts={imageTexts}
                updateImageText={updateImageText}
            />
        );
    }

    if (Number(productId) === 6) {
        return (
            <DesktopCalenderV2
                removeImage={(id: string) => handleDeleteImage(Number(id))}
                images={isNewCalendar ? [] : fetchedImages}
                setImages={setFetchedImages}
                selectedEffect={selectedEffect}
                backgroundColor={backgroundColor}
                effects={effects}
                isUploadingImage={isImgUploading}
                onOpenUpload={(slotIndex?: number) => {
                    setCalendarUploadSlotIndex(typeof slotIndex === "number" ? slotIndex : null);
                    onOpenUpload();
                }}
                onEditImage={openCropModal}
                qty={yearlyQty}
                increaseQty={increaseYearlyQty}
                decreaseQty={decreaseYearlyQty}
            />
        );
    }

    return (
        <ProductImageGrid
            productId={productId}
            visibleImages={visibleImages}
            isRegularPhotos={isRegularPhotos}
            imageMeta={imageMeta}
            htmlDir={htmlDir}
            imageTexts={imageTexts}
            selectedFrame={selectedFrame}
            frames={frames}
            selectedEffect={selectedEffect}
            getCardWrapperStyle={getCardWrapperStyle}
            getFixedPreviewBoxStyle={getFixedPreviewBoxStyle}
            hasPreviewText={hasPreviewText}
            uploadSingleImage={uploadSingleImage}
            openCropModal={openCropModal}
            getImageQuantity={getImageQuantity}
            increaseQuantity={increaseQuantity}
            decreaseQuantity={decreaseQuantity}
            handleDeleteImage={handleDeleteImage}
            updateImageText={updateImageText}
        />
    );
}