import UploadIcon from "@icons/UploadIcon"; import DeleteIcon from '@mui/icons-material/Delete'; import { Box, ButtonBase, IconButton, SxProps, Theme, Typography, useTheme, } from "@mui/material"; import { useCurrentQuiz } from "@root/quizes/hooks"; import { enqueueSnackbar } from "notistack"; import { UploadImageModal } from "../../pages/Questions/UploadImage/UploadImageModal"; import { useEffect, useState } from "react"; import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal"; import { useDisclosure } from "../../utils/useDisclosure"; interface Props { text?: string; sx?: SxProps; heightImg: string; widthImg?: string; imageUrl: string | null; originalImageUrl: string | null; onImageUploadClick: (image: Blob) => void; onImageSaveClick: (image: Blob) => void; onDeleteClick: () => void; } //Научи функцию принимать данные для валидации export const DropZone = ({ text, sx, heightImg, widthImg, imageUrl, originalImageUrl, onImageUploadClick, onImageSaveClick, onDeleteClick }: Props) => { const theme = useTheme(); const quiz = useCurrentQuiz(); const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] = useDisclosure(); const { isCropModalOpen, openCropModal, closeCropModal, imageBlob, setCropModalImageBlob, } = useCropModalState(); if (!quiz) return null; // TODO throw and catch with error boundary async function handleImageUpload(file: File) { onImageUploadClick?.(file); closeImageUploadModal(); openCropModal(file); } return ( openCropModal(imageUrl) : openImageUploadModal} sx={{ width: "100%", height: "100%", display: "flex", justifyContent: "center", alignItems: "center", borderRadius: "8px", }} > {imageUrl ? : <> {text} } {imageUrl && } ); };