frontPanel/src/pages/Questions/UploadImage.tsx

import {
  Typography,
  Box,
  useTheme,
  ButtonBase,
  Modal,
  TextField,
  InputAdornment,
} from "@mui/material";
import UploadBox from "@ui_kit/UploadBox";
import UploadIcon from "../../assets/icons/UploadIcon";
import SearchIcon from "../../assets/icons/SearchIcon";
import * as React from "react";

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

interface ModalkaProps {
  imgHC: (imgInp: HTMLInputElement) => void;
}

const Modalka: React.FC<ModalkaProps> = ({ 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);
  };

  return (
    <Box
      sx={{
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        maxWidth: "690px",
        bgcolor: "background.paper",
        borderRadius: "12px",
        boxShadow: 24,
        p: 0,
      }}
    >
      <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)}
            hidden
            accept="image/*"
            multiple
            type="file"
          />
          <Box
            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>
  );
};

export default function UploadImage() {
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  const imgHC = (imgInp: HTMLInputElement) => {
    if (imgInp.files) {
      const fileArray = Array.from(imgInp.files);
      const [file] = fileArray;
      setImg(URL.createObjectURL(file));
      handleClose();
    }
  };
  const [img, setImg] = React.useState("");

  return (
    <Box sx={{ padding: "20px" }}>
      <Typography
        sx={{
          fontWeight: 500,
          color: theme.palette.grey3.main,
          mt: "11px",
          mb: "14px",
        }}
      >
        Загрузить изображение
      </Typography>
      <ButtonBase
        onClick={handleOpen}
        sx={{ width: "100%", maxWidth: "260px" }}
      >
        {img ? (
          <img width="400" src={img} />
        ) : (
          <UploadBox
            sx={{ maxWidth: "260px" }}
            icon={<UploadIcon />}
            text="5 MB максимум"
          />
        )}
      </ButtonBase>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Modalka imgHC={imgHC} />
      </Modal>
    </Box>
  );
}