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}
        description="Принимает JPG, PNG — максимум 5mb"
      />
      <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>
  );
}