frontPanel/src/pages/startPage/dropZone.tsx

import UploadIcon from "@icons/UploadIcon";
import {
    Box,
    ButtonBase,
    SxProps,
    Theme,
    Typography,
    useTheme,
} from "@mui/material";
import { updateQuiz } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { enqueueSnackbar } from "notistack";
import { useState } from "react";


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

//Научи функцию принимать данные для валидации
export const DropZone = ({ text, sx, heightImg, widthImg }: Props) => {
    const theme = useTheme();
    const quiz = useCurrentQuiz();
    const [ready, setReady] = useState(false);

    if (!quiz) return null; // TODO throw and catch with error boundary

    const imgHC = (imgInp: HTMLInputElement) => {
        const file = imgInp.files?.[0];
        if (file) {
            if (file.size < 5242880) {
                updateQuiz(quiz.id, quiz => {
                    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) {
            updateQuiz(quiz.id, quiz => {
                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>
                {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>
    );
};