frontPanel/src/pages/Questions/UploadImage/UploadImageModal.tsx

import {
  Typography,
  Box,
  useTheme,
  ButtonBase,
  Modal,
  TextField,
  InputAdornment,
  useMediaQuery,
} from "@mui/material";
import UploadIcon from "../../../assets/icons/UploadIcon";
import SearchIcon from "../../../assets/icons/SearchIcon";
import UnsplashIcon from "../../../assets/icons/Unsplash.svg";
import { useRef, useState, type DragEvent } from "react";

type ImageFormat = "jpg" | "jpeg" | "png" | "gif";

interface ModalkaProps {
  isOpen: boolean;
  onClose: () => void;
  handleImageChange: (file: File) => void;
  description?: string;
  accept?: ImageFormat[];
}

export const UploadImageModal: React.FC<ModalkaProps> = ({
  handleImageChange,
  isOpen,
  onClose,
  accept,
  description,
}) => {
  const theme = useTheme();
  const dropZone = useRef<HTMLDivElement>(null);
  const [ready, setReady] = useState(false);
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setReady(true);
  };

  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    event.stopPropagation();

    const file = event.dataTransfer.files[0];
    if (!file) return;

    handleImageChange(file);
  };

  const acceptedFormats = accept
    ? accept.map((format) => "." + format).join(", ")
    : "";

  return (
    <Modal
      open={isOpen}
      onClose={onClose}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <Box
        sx={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
          maxWidth: isMobile ? "300px" : "690px",
          bgcolor: "background.paper",
          borderRadius: "12px",
          boxShadow: 24,
          p: 0,
          overflow: "hidden",
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            padding: "20px",
            background: theme.palette.background.default,
          }}
        >
          <Typography
            sx={{ marginBottom: "20px", fontWeight: "bold", color: "#4D4D4D" }}
          >
            Добавьте изображение
          </Typography>
          <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
            <input
              onChange={(event) =>
                event.target.files?.[0] &&
                handleImageChange(event.target.files[0])
              }
              hidden
              accept={acceptedFormats || ".jpg, .jpeg, .png , .gif"}
              multiple
              type="file"
              data-cy="upload-image-input"
            />
            <Box
              onDragOver={(event: DragEvent<HTMLDivElement>) =>
                event.preventDefault()
              }
              onDrop={handleDrop}
              ref={dropZone}
              sx={{
                width: "580px",
                padding: isMobile ? "33px" : "33px 10px 33px 55px",
                display: "flex",
                alignItems: "center",
                backgroundColor: theme.palette.background.default,
                border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
                borderRadius: "8px",
                gap: "55px",
                flexDirection: isMobile ? "column" : undefined,
              }}
              onDragEnter={handleDragEnter} // Применяем обработчик onDragEnter напрямую
            >
              <UploadIcon />
              <Box>
                <Typography sx={{ color: "#9A9AAF", fontWeight: "bold" }}>
                  Загрузите или перетяните сюда файл
                </Typography>
                <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
                  {description ||
                    "Принимает JPG, PNG, и GIF формат — максимум 5mb"}
                </Typography>
              </Box>
            </Box>
          </ButtonBase>
          {/*  <Box*/}
          {/*    sx={{*/}
          {/*      display: "flex",*/}
          {/*      justifyContent: "space-between",*/}
          {/*      margin: "20px 0",*/}
          {/*    }}*/}
          {/*  >*/}
          {/*    <Typography*/}
          {/*      sx={{*/}
          {/*        fontWeight: "bold",*/}
          {/*        color: "#4D4D4D",*/}
          {/*      }}*/}
          {/*    >*/}
          {/*      Или выберите на фотостоке*/}
          {/*    </Typography>*/}
          {/*    <img src={UnsplashIcon} alt="" />*/}
          {/*  </Box>*/}
          {/*  <TextField*/}
          {/*    id="search-in-unsplash"*/}
          {/*    placeholder="Ищите изображения на английском языка"*/}
          {/*    sx={{*/}
          {/*      "& .MuiInputBase-input": {*/}
          {/*        height: "48px",*/}
          {/*        padding: "0 10px 0 0",*/}
          {/*      },*/}
          {/*      "& .MuiOutlinedInput-notchedOutline": {*/}
          {/*        borderRadius: "8px",*/}
          {/*      },*/}
          {/*      "& .Mui-focused .MuiOutlinedInput-notchedOutline": {*/}
          {/*        border: "1px solid rgba(0, 0, 0, 0.23)",*/}
          {/*      },*/}
          {/*      "& .MuiInputBase-root.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {*/}
          {/*        borderColor: "rgba(0, 0, 0, 0.23)",*/}
          {/*      },*/}
          {/*    }}*/}
          {/*    InputProps={{*/}
          {/*      startAdornment: (*/}
          {/*        <InputAdornment*/}
          {/*          position="start"*/}
          {/*          sx={{*/}
          {/*            outline: "none",*/}
          {/*            "& svg > path": { stroke: "#9A9AAF" },*/}
          {/*          }}*/}
          {/*        >*/}
          {/*          <SearchIcon />*/}
          {/*        </InputAdornment>*/}
          {/*      ),*/}
          {/*    }}*/}
          {/*  />*/}
        </Box>
      </Box>
    </Modal>
  );
};