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 * as React from "react";

import UnsplashIcon from "../../../assets/icons/Unsplash.svg";

import type { DragEvent } from "react";

interface ModalkaProps {
  open: boolean;
  onClose: () => void;
  imgHC: (imgInp: FileList | null) => void;
}

export const UploadImageModal: React.FC<ModalkaProps> = ({
  open,
  onClose,
  imgHC,
}) => {
  const theme = useTheme();

  const dropZone = React.useRef<HTMLDivElement>(null);
  const [ready, setReady] = React.useState(false);

  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setReady(true);
  };

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

    imgHC(event.dataTransfer.files);
  };

  return (
    <Modal
      open={open}
      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) => imgHC(event.target.files)}
              hidden
              accept="image/*"
              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" }}>
                  Принимает 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>
  );
};