import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
import { DropZone } from "../../../pages/startPage/dropZone";
import { useDisclosure } from "../../../utils/useDisclosure";
import { UploadImageModal } from "./UploadImageModal";

type UploadImageProps = {
  question: AnyTypedQuizQuestion;
};

export default function UploadImage({ question }: UploadImageProps) {
  const theme = useTheme();
  const quiz = useCurrentQuiz();

  if (!quiz) return null;

  return (
    <Box sx={{ padding: "20px" }}>
      <Typography
        sx={{
          fontWeight: 500,
          color: theme.palette.grey3.main,
          mt: "11px",
          mb: "14px",
        }}
      >
        Загрузить изображение
      </Typography>
      <DropZone
        text={"5 MB максимум"}
        heightImg={"110px"}
        sx={{ maxWidth: "300px", width: "100%" }}
        imageUrl={question.content.back}
        originalImageUrl={question.content.originalBack}
        onImageUploadClick={(file) => {
          uploadQuestionImage(question.id, quiz.qid, file, (question, url) => {
            question.content.back = url;
            question.content.originalBack = url;
          });
        }}
        onDeleteClick={() => {
          updateQuestion(question.id, (question) => {
            question.content.back = null;
          });
        }}
        onImageSaveClick={(file) => {
          uploadQuestionImage(question.id, quiz.qid, file, (question, url) => {
            question.content.back = url;
          });
        }}
      />
    </Box>
  );
}