feature/webgl-preview-update (#21)

Co-authored-by: itoshi <kkzemeow@gmail.com>
Reviewed-on: #21

src/widgets/ImageUploadCard/index.tsx

@@ -1,11 +1,17 @@
-import React, { useRef, useState, DragEvent, useEffect } from "react";
+import React, { useRef, useState, DragEvent } from "react";
 import { Paper, Box, Typography, Button, Tooltip } from "@mui/material";
-import { X, Info, Plus } from "lucide-react"; // Assuming lucide-react for icons
-import { editSightStore } from "@shared";
+import { X, Info, Plus } from "lucide-react";
+import { editSightStore, PreviewBackgroundToggle } from "@shared";
 import { toast } from "react-toastify";
 interface ImageUploadCardProps {
   title: string;
-  imageKey?: "thumbnail" | "watermark_lu" | "watermark_rd" | "image";
+  imageKey?:
+    | "thumbnail"
+    | "icon"
+    | "alt_icon"
+    | "watermark_lu"
+    | "watermark_rd"
+    | "image";
   imageUrl: string | null | undefined;
   onImageClick: () => void;
   onDeleteImageClick: () => void;
@@ -27,18 +33,10 @@ export const ImageUploadCard: React.FC<ImageUploadCardProps> = ({
   tooltipText,
 }) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isDragOver, setIsDragOver] = useState(false);
+  const [isPreviewBackgroundDark, setIsPreviewBackgroundDark] = useState(false);
   const { setFileToUpload } = editSightStore;
 
-  useEffect(() => {
-    if (isDragOver) {
-      console.log("isDragOver");
-    }
-  }, [isDragOver]);
-
-  // --- Click to select file ---
   const handleZoneClick = () => {
-    // Trigger the hidden file input click
     fileInputRef.current?.click();
   };
 
@@ -59,28 +57,25 @@ export const ImageUploadCard: React.FC<ImageUploadCardProps> = ({
         toast.error("Пожалуйста, выберите изображение");
       }
     }
-    // Reset the input value so selecting the same file again triggers change
+
     event.target.value = "";
   };
 
   const token = localStorage.getItem("token");
-  // --- Drag and Drop Handlers ---
+
   const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
-    event.preventDefault(); // Crucial to allow a drop
+    event.preventDefault();
     event.stopPropagation();
-    setIsDragOver(true);
   };
 
   const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     event.stopPropagation();
-    setIsDragOver(false);
   };
 
   const handleDrop = async (event: DragEvent<HTMLDivElement>) => {
-    event.preventDefault(); // Crucial to allow a drop
+    event.preventDefault();
     event.stopPropagation();
-    setIsDragOver(false);
 
     const files = event.dataTransfer.files;
     if (files && files.length > 0) {
@@ -130,10 +125,21 @@ export const ImageUploadCard: React.FC<ImageUploadCardProps> = ({
           borderRadius: 1,
           mb: 1,
           cursor: imageUrl ? "pointer" : "default",
+          backgroundColor: imageUrl
+            ? isPreviewBackgroundDark
+              ? "#000"
+              : "#fff"
+            : "transparent",
+          transition: "background-color 150ms ease",
         }}
         onClick={onImageClick}
-        // Removed onClick on the main Box to avoid conflicts
       >
+        {imageUrl && (
+          <PreviewBackgroundToggle
+            dark={isPreviewBackgroundDark}
+            onToggle={() => setIsPreviewBackgroundDark((value) => !value)}
+          />
+        )}
         {imageUrl && (
           <button
             className="absolute top-2 right-2"
@@ -165,7 +171,7 @@ export const ImageUploadCard: React.FC<ImageUploadCardProps> = ({
                 borderRadius: 1,
                 cursor: "pointer",
               }}
-              onClick={handleZoneClick} // Click handler for the zone
+              onClick={handleZoneClick}
               onDragOver={handleDragOver}
               onDragLeave={handleDragLeave}
               onDrop={handleDrop}
@@ -179,8 +185,8 @@ export const ImageUploadCard: React.FC<ImageUploadCardProps> = ({
               color="primary"
               startIcon={<Plus color="white" size={18} />}
               onClick={(e) => {
-                e.stopPropagation(); // Prevent `handleZoneClick` from firing
-                onSelectFileClick(); // This button might trigger a different modal
+                e.stopPropagation();
+                onSelectFileClick();
               }}
             >
               Выбрать файл
@@ -191,7 +197,7 @@ export const ImageUploadCard: React.FC<ImageUploadCardProps> = ({
               ref={fileInputRef}
               onChange={handleFileInputChange}
               style={{ display: "none" }}
-              accept="image/*" // Accept only image files
+              accept="image/*"
             />
           </div>
         )}