From f5ed7517fab53a2efec09e89eca6e33ab6e0be34 Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Sun, 22 Jun 2025 19:18:08 +0300
Subject: [PATCH] =?UTF-8?q?varimg=20=D0=B8=D0=BC=D0=B5=D0=B5=D1=82=20?=
 =?UTF-8?q?=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D1=83=20=D1=83=D0=B4=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../questions/Varimg/index.tsx                | 47 ++++++++++++++++---
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/lib/components/ViewPublicationPage/questions/Varimg/index.tsx b/lib/components/ViewPublicationPage/questions/Varimg/index.tsx
index b6a9793..4c04553 100644
--- a/lib/components/ViewPublicationPage/questions/Varimg/index.tsx
+++ b/lib/components/ViewPublicationPage/questions/Varimg/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, ButtonBase, RadioGroup, Typography, useTheme } from "@mui/material";
+import { Box, ButtonBase, RadioGroup, Typography, useTheme, IconButton } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
 
 import { VarimgVariant } from "./VarimgVariant";
 import { OwnVarimgImage } from "./OwnVarimgImage";
@@ -76,6 +77,15 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
     }
   };
 
+  const handleRemoveImage = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (ownVariantData) {
+      // Сохраняем текущий answer, очищаем только изображения
+      const currentAnswer = ownVariantData.variant.answer || "";
+      updateOwnVariant(ownVariantData.id, currentAnswer, "", "", "");
+    }
+  };
+
   if (moment.isMoment(answer)) throw new Error("Answer is Moment in Variant question");
 
   return (
@@ -162,6 +172,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
             backgroundColor: "#9A9AAF30",
             color: theme.palette.text.primary,
             textAlign: "center",
+            position: "relative",
             "&:hover": {
               backgroundColor: ownVariantInQuestion ? "rgba(0,0,0,0.04)" : "transparent",
             },
@@ -172,12 +183,34 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
               const imageUrl = variant?.isOwn && ownImageUrl ? ownImageUrl : choiceImgUrlAnswer;
               if (imageUrl) {
                 return (
-                  <img
-                    key={imageUrl}
-                    src={imageUrl}
-                    style={{ width: "100%", height: "100%", objectFit: "cover" }}
-                    alt=""
-                  />
+                  <>
+                    <img
+                      key={imageUrl}
+                      src={imageUrl}
+                      style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                      alt=""
+                    />
+                    {variant?.isOwn && ownImageUrl && (
+                      <IconButton
+                        onClick={handleRemoveImage}
+                        sx={{
+                          position: "absolute",
+                          top: 8,
+                          left: 8,
+                          zIndex: 1,
+                          backgroundColor: "rgba(0, 0, 0, 0.5)",
+                          color: "white",
+                          height: "25px",
+                          width: "25px",
+                          "&:hover": {
+                            backgroundColor: "rgba(0, 0, 0, 0.7)",
+                          },
+                        }}
+                      >
+                        <CloseIcon />
+                      </IconButton>
+                    )}
+                  </>
                 );
               }
               return <BlankImage />;