import { toast } from "sonner";
import { effects } from "../constants/effects";
import { getImageKey, getPreviewImgSrc } from "../utils/imageHelpers";
import { ImageMetaMap } from "../types/product";

type ProductNormalImagePreviewProps = {
    uploadedImage: any;
    imageIndex: number;
    productId: string | number;
    selectedEffect: string;
    imageMeta: ImageMetaMap;
    htmlDir: string;
    imageTexts: { [key: string]: string };

    isUploading: boolean;
    hasPreviewText: () => boolean;
    getFixedPreviewBoxStyle: (uploadedImage: any) => React.CSSProperties;
    openCropModal: (img: any) => void;
    updateImageText: (imageId: number | string, text: string) => void;
};

export default function ProductNormalImagePreview({
                                                      uploadedImage,
                                                      imageIndex,
                                                      productId,
                                                      selectedEffect,
                                                      imageMeta,
                                                      htmlDir,
                                                      imageTexts,
                                                      isUploading,
                                                      hasPreviewText,
                                                      getFixedPreviewBoxStyle,
                                                      openCropModal,
                                                      updateImageText,
                                                  }: ProductNormalImagePreviewProps) {
    return (
        <div
            className="flex flex-col items-center justify-start overflow-hidden bg-white"
            style={getFixedPreviewBoxStyle(uploadedImage)}
        >
            <img
                onClick={() => {
                    if (isUploading) {
                        toast.info("يرجى الانتظار حتى اكتمال رفع الصورة");
                        return;
                    }

                    openCropModal(uploadedImage);
                }}
                src={`${getPreviewImgSrc(uploadedImage)}?t=${
                    uploadedImage?.updated_at || Date.now()
                }`}
                alt={`image-${imageIndex}`}
                style={
                    hasPreviewText()
                        ? {
                            width: "100%",
                            height: "auto",
                            maxWidth: "100%",
                            display: "block",
                            filter: effects[selectedEffect as keyof typeof effects],
                        }
                        : Number(productId) === 3 &&
                        imageMeta[getImageKey(uploadedImage)]?.orientation === "portrait"
                            ? {
                                height: "100%",
                                maxWidth: "100%",
                                display: "block",
                                margin: "0 auto",
                                filter: effects[selectedEffect as keyof typeof effects],
                            }
                            : Number(productId) === 3 &&
                            imageMeta[getImageKey(uploadedImage)]?.orientation === "landscape"
                                ? {
                                    width: "100%",
                                    height: "100%",
                                    objectFit: "cover",
                                    display: "block",
                                    filter: effects[selectedEffect as keyof typeof effects],
                                }
                                : {
                                    width: "100%",
                                    height: "100%",
                                    objectFit: "cover",
                                    display: "block",
                                    filter: effects[selectedEffect as keyof typeof effects],
                                }
                }
            />

            {hasPreviewText() && (
                <input
                    type="text"
                    dir={htmlDir}
                    placeholder="أضف نصًا"
                    className="classic-add-text-input"
                    value={
                        imageTexts[String(uploadedImage.id)] ??
                        uploadedImage?.caption_text ??
                        ""
                    }
                    onClick={(e) => e.stopPropagation()}
                    onChange={(e) => {
                        updateImageText(uploadedImage.id, e.target.value);
                    }}
                />
            )}
        </div>
    );
}