frontPanel/src/pages/startPage/FaviconDropZone.tsx

import UploadIcon from "@icons/UploadIcon";
import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { enqueueSnackbar } from "notistack";
import { useState } from "react";
import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal";
import { useDisclosure } from "../../utils/useDisclosure";


const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];

interface Props {
    imageUrl: string | null;
    onImageUploadClick: (image: Blob) => void;
    onDeleteClick: () => void;
}

export default function FaviconDropZone({ imageUrl, onImageUploadClick, onDeleteClick }: Props) {
    const theme = useTheme();
    const quiz = useCurrentQuiz();
    const [isDropReady, setIsDropReady] = useState<boolean>(false);
    const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure();

    if (!quiz) return null;

    async function handleImageUpload(file: File) {
        if (file.size > 5 * 2 ** 20) return enqueueSnackbar("Размер картинки слишком велик");
        if (!allowedFileTypes.includes(file.type)) return enqueueSnackbar("Допустимые форматы изображений: png, jpeg, gif");

        onImageUploadClick(file);
        closeImageUploadModal();
    }

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

        const file = event.dataTransfer.files[0];
        if (!file || imageUrl) return;

        handleImageUpload(file);
    };

    return (
        <Box sx={{
            display: "flex",
            gap: "10px",
        }}>
            <UploadImageModal
                isOpen={isImageUploadOpen}
                onClose={closeImageUploadModal}
                handleImageChange={handleImageUpload}
            />
            <Box
                onDragEnter={() => !imageUrl && setIsDropReady(true)}
                onDragExit={() => setIsDropReady(false)}
                onDragOver={e => e.preventDefault()}
                onDrop={onDrop}
                sx={{
                    width: "48px",
                    height: "48px",
                    backgroundColor: theme.palette.background.default,
                    border: `1px solid ${isDropReady ? "red" : theme.palette.grey2.main}`,
                    borderRadius: "8px",
                }}>
                <ButtonBase
                    onClick={imageUrl ? undefined : openImageUploadModal}
                    sx={{
                        width: "100%",
                        height: "100%",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        borderRadius: "8px",
                        overflow: "hidden",
                    }}
                >
                    {imageUrl ?
                        <img
                            src={imageUrl}
                            style={{
                                width: "100%",
                                height: "100%",
                                objectFit: "scale-down",
                            }}
                        />
                        :
                        <UploadIcon />
                    }
                </ButtonBase>
            </Box>
            <Box sx={{
                display: "flex",
                flexDirection: "column",
                alignItems: "start",
            }}>
                {imageUrl &&
                    <ButtonBase onClick={onDeleteClick}>
                        <Typography
                            sx={{
                                color: theme.palette.orange.main,
                                fontSize: "16px",
                                lineHeight: "19px",
                                textDecoration: "underline",
                            }}
                        >
                            Удалить
                        </Typography>
                    </ButtonBase>
                }
                <Typography
                    sx={{
                        color: theme.palette.orange.main,
                        fontSize: "16px",
                        lineHeight: "19px",
                        textDecoration: "underline",
                        mt: "auto",
                    }}
                >
                    5 MB максимум
                </Typography>
            </Box>
        </Box>
    );
};