import ProductImageActions from "./ProductImageActions";
import ProductImageUploadingPreview from "./ProductImageUploadingPreview";
import ProductImageFailedOverlay from "./ProductImageFailedOverlay";
import ProductFramedImagePreview from "./ProductFramedImagePreview";
import ProductNormalImagePreview from "./ProductNormalImagePreview";
import { ImageMetaMap } from "../types/product";

type ProductImageGridProps = {
    productId: string | number;
    visibleImages: any[];

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

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

    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;
    handleDeleteImage: (imageId: any) => void;
    updateImageText: (imageId: number | string, text: string) => void;
};

export default function ProductImageGrid({
                                             productId,
                                             visibleImages,

                                             isRegularPhotos,
                                             imageMeta,
                                             htmlDir,
                                             imageTexts,

                                             selectedFrame,
                                             frames,
                                             selectedEffect,

                                             getCardWrapperStyle,
                                             getFixedPreviewBoxStyle,
                                             hasPreviewText,

                                             uploadSingleImage,
                                             openCropModal,

                                             getImageQuantity,
                                             increaseQuantity,
                                             decreaseQuantity,
                                             handleDeleteImage,
                                             updateImageText,
                                         }: ProductImageGridProps) {
    return (
        <div className="mt-10 w-full max-w-8xl mb-2">
            <div className="relative">
                <div
                    className="cursor-pointer overflow-x-auto no-scrollbar"
                    style={{
                        scrollSnapType: "x mandatory",
                        scrollPadding: "0",
                        paddingLeft: "calc(50vw - 50%)",
                        paddingBottom: "270px",
                    }}
                    role="region"
                    aria-label="صور المنتج"
                >
                    <div
                        className="flex flex-wrap items-end"
                        style={{
                            columnGap: "32px",
                            rowGap: "24px",
                            padding: "0",
                            margin: "0",
                        }}
                    >
                        {visibleImages
                            .filter((img) => img.uploadStatus !== "failed")
                            .map((uploadedImage: any, i: number) => {
                                const cardWrapperStyle =
                                    Number(productId) === 8
                                        ? {
                                            width: "255px",
                                            minHeight: "350px",
                                            display: "flex",
                                            flexDirection: "column" as const,
                                            alignItems: "center",
                                        }
                                        : isRegularPhotos
                                            ? getCardWrapperStyle(uploadedImage)
                                            : {
                                                width: "100%",
                                                maxWidth: "320px",
                                                display: "flex",
                                                flexDirection: "column" as const,
                                                alignItems: "center",
                                            };

                                const isUploading =
                                    uploadedImage.uploadStatus === "uploading" ||
                                    uploadedImage.uploadStatus === "pending";

                                const hidePreviewWhileUploading = isUploading;

                                return (
                                    <div
                                        key={uploadedImage.id}
                                        className="relative flex-shrink-0 transition-transform duration-300"
                                        style={cardWrapperStyle}
                                    >
                                        <ProductImageFailedOverlay
                                            uploadedImage={uploadedImage}
                                            onRetry={(image) => uploadSingleImage(image, true)}
                                        />

                                        <div
                                            className={
                                                Number(productId) === 4
                                                    ? "flex flex-col items-center transition-all"
                                                    : ""
                                            }
                                            style={{
                                                width: "100%",
                                                backgroundColor: "transparent",
                                            }}
                                        >
                                            {hidePreviewWhileUploading ? (
                                                <ProductImageUploadingPreview
                                                    style={getFixedPreviewBoxStyle(uploadedImage)}
                                                />
                                            ) : (
                                                <>
                                                    {selectedFrame && Number(productId) === 8 && (
                                                        <ProductFramedImagePreview
                                                            uploadedImage={uploadedImage}
                                                            imageIndex={i}
                                                            frames={frames}
                                                            selectedFrame={selectedFrame}
                                                            selectedEffect={selectedEffect}
                                                            isUploading={isUploading}
                                                            openCropModal={openCropModal}
                                                        />
                                                    )}

                                                    {(!selectedFrame || Number(productId) !== 8) && (
                                                        <ProductNormalImagePreview
                                                            uploadedImage={uploadedImage}
                                                            imageIndex={i}
                                                            productId={productId}
                                                            selectedEffect={selectedEffect}
                                                            imageMeta={imageMeta}
                                                            htmlDir={htmlDir}
                                                            imageTexts={imageTexts}
                                                            isUploading={isUploading}
                                                            hasPreviewText={hasPreviewText}
                                                            getFixedPreviewBoxStyle={getFixedPreviewBoxStyle}
                                                            openCropModal={openCropModal}
                                                            updateImageText={updateImageText}
                                                        />
                                                    )}
                                                </>
                                            )}
                                        </div>

                                        <ProductImageActions
                                            productId={productId}
                                            uploadedImage={uploadedImage}
                                            isUploading={isUploading}
                                            getImageQuantity={getImageQuantity}
                                            increaseQuantity={increaseQuantity}
                                            decreaseQuantity={decreaseQuantity}
                                            handleDeleteImage={handleDeleteImage}
                                            openCropModal={openCropModal}
                                        />
                                    </div>
                                );
                            })}
                    </div>
                </div>
            </div>
        </div>
    );
}