import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
import { openCropModal } from "@root/cropModal";
import { closeImageUploadModal, openImageUploadModal } from "@root/imageUploadModal";
import { setQuestionBackgroundImage, setQuestionOriginalBackgroundImage } from "@root/questions/actions";
import { CropModal } from "@ui_kit/Modal/CropModal";
import UploadBox from "@ui_kit/UploadBox";
import { type DragEvent } from "react";
import UploadIcon from "../../../assets/icons/UploadIcon";
import { UploadImageModal } from "./UploadImageModal";


type UploadImageProps = {
    question: AnyTypedQuizQuestion;
};

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

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

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

        const url = URL.createObjectURL(file);

        setQuestionBackgroundImage(question.id, url);
        setQuestionOriginalBackgroundImage(question.id, url);
        closeImageUploadModal();
        openCropModal(url, url);
    };

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

        handleImageUpload(event.dataTransfer.files);
    };

    function handleCropModalSaveClick(url: string) {
        setQuestionBackgroundImage(question.id, url);
    }

    return (
        <Box sx={{ padding: "20px" }}>
            <Typography
                sx={{
                    fontWeight: 500,
                    color: theme.palette.grey3.main,
                    mt: "11px",
                    mb: "14px",
                }}
            >
                Загрузить изображение
            </Typography>
            <ButtonBase
                onClick={openImageUploadModal}
                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 imgHC={handleImageUpload} />
            <CropModal onSaveImageClick={handleCropModalSaveClick} />
        </Box>
    );
}