frontPanel/src/pages/Questions/OptionsPicture/OptionsPicture.tsx

import { useState } from "react";
import { useParams } from "react-router-dom";
import {
    Box,
    Link,
    Typography,
    Button,
    useTheme,
    useMediaQuery
} from "@mui/material";

import ButtonsOptions from "../ButtonsOptions";
import { AnswerDraggableList } from "../AnswerDraggableList";
import { CropModal } from "@ui_kit/Modal/CropModal";
import { UploadImageModal } from "../UploadImage/UploadImageModal";
import { questionStore, updateQuestionsList } from "@root/questions";

import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import AddImage from "../../../assets/icons/questionsPage/addImage";
import Image from "../../../assets/icons/questionsPage/image";
import SwitchAnswerOptionsPict from "./switchOptionsPict";
import PlusImage from "@icons/questionsPage/plus";

import type { QuizQuestionImages } from "../../../model/questionTypes/images";
import { produce } from "immer";

interface Props {
    totalIndex: number;
}

export default function OptionsPicture({ totalIndex }: Props) {
    const [open, setOpen] = useState(false);
    const [opened, setOpened] = useState<boolean>(false);
    const [currentIndex, setCurrentIndex] = useState<number>(0);
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const isTablet = useMediaQuery(theme.breakpoints.down(790));
    const quizId = Number(useParams().quizId);
    const [switchState, setSwitchState] = useState("setting");
    const { listQuestions } = questionStore();
    const question = listQuestions[quizId][totalIndex] as QuizQuestionImages;

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

    const uploadImage = (files: FileList | null) => {
        if (files?.length) {
            const [file] = Array.from(files);

            const clonedContent = { ...question.content };
            clonedContent.variants[currentIndex].extendedText =
                URL.createObjectURL(file);
            updateQuestionsList<QuizQuestionImages>(quizId, totalIndex, {
                content: clonedContent,
            });

            setOpen(false);
            setOpened(true);
        }
    };

    const addNewAnswer = () => {
        const answerNew = question.content.variants.slice();
        answerNew.push({ answer: "", hints: "", extendedText: "" });

        updateQuestionsList<QuizQuestionImages>(quizId, totalIndex, {
            content: { ...question.content, variants: answerNew },
        });
    };

    return (
        <>
            <Box sx={{ padding: "20px" }}>
                <AnswerDraggableList
                    variants={question.content.variants}
                    totalIndex={totalIndex}
                    additionalContent={(variant, index) => (
                        <>
                            {!isMobile && (
                                <Box
                                    sx={{ cursor: "pointer" }}
                                    onClick={() => {
                                        setCurrentIndex(index);
                                        setOpen(true);
                                    }}
                                >
                                    {variant.extendedText ? (
                                        <Box
                                            sx={{
                                                overflow: "hidden",
                                                width: "60px",
                                                display: "flex",
                                                alignItems: "center",
                                                background: "#EEE4FC",
                                                borderRadius: "3px",
                                                margin: "0 10px",
                                                height: "40px",
                                            }}
                                        >
                                            <Box sx={{ display: "flex", width: "40px" }}>
                                                <img
                                                    src={variant.extendedText}
                                                    alt=""
                                                    style={{ width: "100%" }}
                                                />
                                            </Box>
                                            <PlusImage />
                                        </Box>
                                    ) : (
                                        <Button component="label" sx={{ padding: "0px" }}>
                                            <AddImage
                                                sx={{ height: "40px", width: "60px", margin: "0 10px" }}
                                            />
                                        </Button>
                                    )}
                                </Box>
                            )}
                        </>
                    )}
                    additionalMobile={(variant, index) => (
                        <>
                            {isMobile && (
                                <Box
                                    onClick={() => {
                                        setCurrentIndex(index);
                                        setOpen(true);
                                    }}
                                    sx={{
                                        overflow: "hidden",
                                        display: "flex",
                                        alignItems: "center",
                                        m: "8px",
                                        position: "relative",
                                        borderRadius: "3px",
                                    }}
                                >
                                    <Box
                                        sx={{
                                            width: "100%",
                                            background: "#EEE4FC",
                                            height: "40px",
                                            display: "flex",
                                            alignItems: "center",
                                            justifyContent: "center",
                                        }}
                                    >
                                        {variant.extendedText ? (
                                            <Box
                                                sx={{
                                                    overflow: "hidden",
                                                    width: "40px",
                                                    display: "flex",
                                                    alignItems: "center",
                                                    background: "#EEE4FC",
                                                    height: "30px",
                                                    borderRadius: "3px",
                                                }}
                                            >
                                                <img
                                                    src={variant.extendedText}
                                                    alt=""
                                                    style={{ width: "100%" }}
                                                />
                                            </Box>
                                        ) : (
                                            <Button component="label" sx={{ padding: "0px" }}>
                                                <Image
                                                    sx={{
                                                        height: "40px",
                                                        width: "60px",
                                                        margin: "0 10px",
                                                    }}
                                                />
                                            </Button>
                                        )}
                                    </Box>
                                    <Box
                                        sx={{
                                            display: "flex",
                                            justifyContent: "center",
                                            alignItems: "center",
                                            width: "20px",
                                            background: "#EEE4FC",
                                            height: "40px",
                                            color: "white",
                                            backgroundColor: "#7E2AEA",
                                        }}
                                    >
                                        +
                                    </Box>
                                </Box>
                            )}
                        </>
                    )}
                />
                <UploadImageModal
                    open={open}
                    onClose={() => setOpen(false)}
                    imgHC={uploadImage}
                />
                <CropModal
                    opened={opened}
                    onClose={() => setOpened(false)}
                    picture={question.content.variants[currentIndex]?.extendedText}
                    onCropPress={url => {
                        const content = produce(question.content, draft => {
                            draft.variants[currentIndex].extendedText = url;
                        });
                        updateQuestionsList<QuizQuestionImages>(quizId, totalIndex, {
                            content,
                        });
                    }}
                />
                <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
                    <Link
                        component="button"
                        variant="body2"
                        sx={{ color: theme.palette.brightPurple.main }}
                        onClick={addNewAnswer}
                    >
                        Добавьте ответ
                    </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} totalIndex={totalIndex} />
            <SwitchAnswerOptionsPict switchState={switchState} totalIndex={totalIndex} />
        </>
    );
}