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

import { openCropModal } from "@root/cropModal";
import { QuizQuestionBase } from "model/questionTypes/shared";
import type { DragEvent } from "react";

type UploadImageProps = {
    totalIndex: number;
};

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

    const handleImageUpload = (files: FileList | null) => {
        if (!files?.length) return;

        const [file] = Array.from(files);

        const url = URL.createObjectURL(file);

        setQuestionBackgroundImage(quizId, totalIndex, url);
        setQuestionOriginalBackgroundImage(quizId, totalIndex, url);
        setIsUploadImageModalOpen(false);
        openCropModal(url, url);
    };

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

        handleImageUpload(event.dataTransfer.files);
    };

    function handleCropModalSaveClick(url: string) {
        setQuestionBackgroundImage(quizId, totalIndex, url);
    }

    return (
        <Box sx={{ padding: "20px" }}>
            <Typography
                sx={{
                    fontWeight: 500,
                    color: theme.palette.grey3.main,
                    mt: "11px",
                    mb: "14px",
                }}
            >
                Загрузить изображение
            </Typography>
            <ButtonBase
                onClick={() => setIsUploadImageModalOpen(true)}
                sx={{
                    width: "100%",
                    maxWidth: "260px",
                    height: "120px",
                }}
            >
                {question.content.back ?
                    <img
                        src={question.content.back}
                        alt="question background"
                        style={{
                            width: "100%",
                            height: "100%",
                            objectFit: "scale-down",
                            display: "block",
                        }}
                    />
                    :
                    <UploadBox
                        handleDrop={handleDrop}
                        sx={{ maxWidth: "260px" }}
                        icon={<UploadIcon />}
                        text="5 MB максимум"
                    />
                }
            </ButtonBase>
            <UploadImageModal
                open={isUploadImageModalOpen}
                onClose={() => setIsUploadImageModalOpen(false)}
                imgHC={handleImageUpload}
            />
            <CropModal onSaveImageClick={handleCropModalSaveClick} />
        </Box>
    );
}