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

import { Typography, Box, useTheme, ButtonBase, Modal, TextField, InputAdornment } 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";

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

export const UploadImageModal: React.FC<ModalkaProps> = ({ handleImageChange, isOpen, onClose, description }) => {
  const theme = useTheme();
  const dropZone = useRef<HTMLDivElement>(null);
  const [ready, setReady] = useState(false);

  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);
  };

  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: "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=".jpg, .jpeg, .png"
              multiple
              type="file"
              data-cy="upload-image-input"
            />
            <Box
              onDragOver={(event: DragEvent<HTMLDivElement>) => event.preventDefault()}
              onDrop={handleDrop}
              ref={dropZone}
              sx={{
                width: "580px",
                padding: "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",
              }}
              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>
  );
};