frontPanel/src/pages/startPage/dropZone.tsx

import { useState } from "react";
import { useParams } from "react-router-dom";
import {
  Box,
  ButtonBase,
  useTheme,
  Typography,
  SxProps,
  Theme,
} from "@mui/material";
import { SnackbarProvider, enqueueSnackbar } from "notistack";

import { quizStore } from "@root/quizes";

import UploadIcon from "@icons/UploadIcon";

interface Props {
  text?: string;
  sx?: SxProps<Theme>;
  heightImg: string;
  widthImg?: string;
}

//Научи функцию принимать данные для валидации
export const DropZone = ({ text, sx, heightImg, widthImg }: Props) => {
  const quizId = Number(useParams().quizId);
  const { listQuizes, updateQuizesList } = quizStore();
  const [ready, setReady] = useState(false);
  const theme = useTheme();
  const quiz = listQuizes[quizId];
  console.log(quiz.config.startpage.background.desktop);

  const imgHC = (imgInp: HTMLInputElement) => {
    const file = imgInp.files?.[0];
    if (file) {
      if (file.size < 5242880) {
        updateQuizesList(quizId, {
          config: {
            ...quiz.config,
            startpage: {
              ...quiz.config.startpage,
              background: {
                ...quiz.config.startpage.background,
                desktop: URL.createObjectURL(file),
              },
            },
          },
        });
      } else {
        enqueueSnackbar("Размер картинки слишком велик");
      }
    }
  };

  const dragenterHC = () => {
    setReady(true);
  };

  const dragexitHC = () => {
    setReady(false);
  };

  const dropHC = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setReady(false);

    const file = event.dataTransfer.files[0];
    if (file.size < 5242880) {
      updateQuizesList(quizId, {
        config: {
          ...quiz.config,
          startpage: {
            ...quiz.config.startpage,
            background: {
              ...quiz.config.startpage.background,
              desktop: URL.createObjectURL(file),
            },
          },
        },
      });
    } else {
      enqueueSnackbar("Размер картинки слишком велик");
    }
  };

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

  return (
    <ButtonBase component="label" sx={{ justifyContent: "flex-start" }}>
      <input
        onChange={(event) => imgHC(event.target)}
        hidden
        accept="image/*"
        multiple
        type="file"
      />
      <Box
        onDragEnter={dragenterHC}
        onDragExit={dragexitHC}
        onDrop={dropHC}
        onDragOver={dragOverHC}
        sx={{
          width: "100%",
          height: "120px",
          position: "relative",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          backgroundColor: theme.palette.background.default,
          border: `1px solid ${ready ? "red" : theme.palette.grey2.main}`,
          borderRadius: "8px",
          opacity: quiz.config.startpage.background.desktop ? "0.5" : 1,
          ...sx,
        }}
      >
        <UploadIcon />
        <Typography
          sx={{
            position: "absolute",
            right: "10px",
            bottom: "10px",
            color: theme.palette.orange.main,
            fontSize: "16px",
            lineHeight: "19px",
            textDecoration: "underline",
          }}
        >
          {text}
        </Typography>
        <SnackbarProvider
          style={{ backgroundColor: theme.palette.brightPurple.main }}
        />
        {quiz.config.startpage.background.desktop && (
          <img
            height={heightImg}
            width={widthImg}
            src={quiz.config.startpage.background.desktop}
            style={{
              position: "absolute",
              zIndex: "-1",
              objectFit: "revert-layer",
            }}
            alt="img"
          />
        )}
      </Box>
    </ButtonBase>
  );
};