import { useParams } from "react-router-dom";
import { Typography, Box, useTheme, ButtonBase } from "@mui/material";
import UploadBox from "@ui_kit/UploadBox";
import { CropModal } from "@ui_kit/Modal/CropModal";
import UploadIcon from "../../../assets/icons/UploadIcon";
import * as React from "react";
import { questionStore, updateQuestionsList } from "@root/questions";
import { UploadImageModal } from "./UploadImageModal";

import type { DragEvent } from "react";
import type { QuizQuestionImages } from "../../../model/questionTypes/images";
import { openCropModal } from "@root/cropModal";

type UploadImageProps = {
  totalIndex: number;
};

export default function UploadImage({ totalIndex }: UploadImageProps) {
  const quizId = Number(useParams().quizId);
  const theme = useTheme();
  const [open, setOpen] = React.useState(false);
  const { listQuestions } = questionStore();
  const question = listQuestions[quizId][totalIndex] as QuizQuestionImages;

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  const imgHC = (files: FileList | null) => {
    if (files?.length) {
      const [file] = Array.from(files);

      updateQuestionsList<QuizQuestionImages>(quizId, totalIndex, {
        content: {
          ...question.content,
          back: URL.createObjectURL(file),
        },
      });

      handleClose();
      openCropModal(question.content.back, question.content.back);
    }
  };

  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    event.stopPropagation();

    imgHC(event.dataTransfer.files);
  };

  return (
    <Box sx={{ padding: "20px" }}>
      <Typography
        sx={{
          fontWeight: 500,
          color: theme.palette.grey3.main,
          mt: "11px",
          mb: "14px",
        }}
      >
        Загрузить изображение
      </Typography>
      <ButtonBase
        onClick={handleOpen}
        sx={{ width: "100%", maxWidth: "260px" }}
      >
        <UploadBox
          handleDrop={handleDrop}
          sx={{ maxWidth: "260px" }}
          icon={<UploadIcon />}
          text="5 MB максимум"
        />
      </ButtonBase>
      <UploadImageModal open={open} onClose={handleClose} imgHC={imgHC} />
      <CropModal />
    </Box>
  );
}