import {
    Box,
    Link,
    Typography,
    useMediaQuery,
    useTheme
} from "@mui/material";
import { openCropModal } from "@root/cropModal";
import { closeImageUploadModal, openImageUploadModal } from "@root/imageUploadModal";
import { addQuestionVariant, setVariantImageUrl, setVariantOriginalImageUrl } from "@root/questions/actions";
import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton";
import { CropModal } from "@ui_kit/Modal/CropModal";
import { useState } from "react";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import type { QuizQuestionImages } from "../../../model/questionTypes/images";
import { AnswerDraggableList } from "../AnswerDraggableList";
import ButtonsOptions from "../ButtonsOptions";
import { UploadImageModal } from "../UploadImage/UploadImageModal";
import SwitchAnswerOptionsPict from "./switchOptionsPict";


interface Props {
    question: QuizQuestionImages;
}

export default function OptionsPicture({ question }: Props) {
    const theme = useTheme();
    const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
    const [switchState, setSwitchState] = useState("setting");
    const isMobile = useMediaQuery(theme.breakpoints.down(790));

    const SSHC = (data: string) => {
        setSwitchState(data);
    };

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

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

        setVariantImageUrl(question.id, selectedVariantId, url);
        setVariantOriginalImageUrl(question.id, selectedVariantId, url);
        closeImageUploadModal();
        openCropModal(url, url);
    };

    function handleCropModalSaveClick(url: string) {
        if (!selectedVariantId) return;

        setVariantImageUrl(question.id, selectedVariantId, url);
    }

    return (
        <>
            <Box sx={{ padding: "20px" }}>
                <AnswerDraggableList
                    question={question}
                    additionalContent={(variant) => (
                        <>
                            {!isMobile && (
                                <AddOrEditImageButton
                                    imageSrc={variant.extendedText}
                                    onImageClick={() => {
                                        if (!("originalImageUrl" in variant)) return;

                                        setSelectedVariantId(variant.id);
                                        if (variant.extendedText) {
                                            return openCropModal(
                                                variant.extendedText,
                                                variant.originalImageUrl || ""
                                            );
                                        }

                                        openImageUploadModal();
                                    }}
                                    onPlusClick={() => {
                                        setSelectedVariantId(variant.id);
                                        openImageUploadModal();
                                    }}
                                    sx={{ mx: "10px" }}
                                />
                            )}
                        </>
                    )}
                    additionalMobile={(variant) => (
                        <>
                            {isMobile && (
                                <AddOrEditImageButton
                                    imageSrc={variant.extendedText}
                                    onImageClick={() => {
                                        if (!("originalImageUrl" in variant)) return;

                                        setSelectedVariantId(variant.id);
                                        if (variant.extendedText) {
                                            return openCropModal(
                                                variant.extendedText,
                                                variant.originalImageUrl || ""
                                            );
                                        }

                                        openImageUploadModal();
                                    }}
                                    onPlusClick={() => {
                                        setSelectedVariantId(variant.id);
                                        openImageUploadModal();
                                    }}
                                    sx={{ m: "8px", width: "auto" }}
                                />
                            )}
                        </>
                    )}
                />
                <UploadImageModal imgHC={handleImageUpload} />
                <CropModal onSaveImageClick={handleCropModalSaveClick} />
                <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
                    <Link
                        component="button"
                        variant="body2"
                        sx={{ color: theme.palette.brightPurple.main }}
                        onClick={() => addQuestionVariant(question.id)}
                    >
                        Добавьте ответ
                    </Link>
                    {isMobile ? null : (
                        <>
                            <Typography
                                sx={{
                                    fontWeight: 400,
                                    lineHeight: "21.33px",
                                    color: theme.palette.grey2.main,
                                    fontSize: "16px",
                                }}
                            >
                                или нажмите Enter
                            </Typography>
                            <EnterIcon
                                style={{
                                    color: "#7E2AEA",
                                    fontSize: "24px",
                                    marginLeft: "6px",
                                }}
                            />
                        </>
                    )}
                </Box>
            </Box>
            <ButtonsOptions switchState={switchState} SSHC={SSHC} question={question} />
            <SwitchAnswerOptionsPict switchState={switchState} question={question} />
        </>

    );
}