frontPanel/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx

import {
    Box,
    IconButton,
    InputAdornment,
    Link,
    Popover,
    TextField,
    TextareaAutosize,
    Typography,
    useMediaQuery,
    useTheme
} from "@mui/material";
import { useState } from "react";
import { useParams } from "react-router-dom";

import { CropModal } from "@ui_kit/Modal/CropModal";
import { AnswerDraggableList } from "../AnswerDraggableList";
import { UploadImageModal } from "../UploadImage/UploadImageModal";

import { ImageAddIcons } from "@icons/ImageAddIcons";
import { MessageIcon } from "@icons/messagIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { questionStore, updateQuestionsList } from "@root/questions";
import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import SwitchOptionsAndPict from "./switchOptionsAndPict";

import AddOrEditImageButton from "@ui_kit/AddOrEditImageButton";
import { produce } from "immer";
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
import { openCropModal } from "@root/cropModal";

interface Props {
    totalIndex: number;
}

export default function OptionsAndPicture({ totalIndex }: Props) {
    const [isUploadImageModalOpen, setIsUploadImageModalOpen] = useState(false);
    const [switchState, setSwitchState] = useState("setting");
    const [currentIndex, setCurrentIndex] = useState<number>(0);
    const quizId = Number(useParams().quizId);
    const { listQuestions } = questionStore();
    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const question = listQuestions[quizId][totalIndex] as QuizQuestionVarImg;

    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<QuizQuestionVarImg>(quizId, totalIndex, {
                content: clonedContent,
            });

            setIsUploadImageModalOpen(false);
            openCropModal(
                question.content.variants[currentIndex]?.extendedText,
                question.content.variants[currentIndex]?.originalImageUrl
            );
        }
    };

    return (
        <>
            <Box sx={{ pl: "20px", pr: "20px" }}>
                <AnswerDraggableList
                    variants={question.content.variants}
                    totalIndex={totalIndex}
                    additionalContent={(variant, index) => (
                        <>
                            {!isMobile && (
                                <AddOrEditImageButton
                                    imageSrc={variant.extendedText}
                                    onImageClick={() => {
                                        if (!("originalImageUrl" in variant)) return;

                                        setCurrentIndex(index);
                                        if (variant.extendedText) return openCropModal(
                                            variant.extendedText,
                                            variant.originalImageUrl
                                        );

                                        setIsUploadImageModalOpen(true);
                                    }}
                                    onPlusClick={() => {
                                        setCurrentIndex(index);
                                        setIsUploadImageModalOpen(true);
                                    }}
                                    sx={{ mx: "10px" }}
                                />
                            )}
                        </>
                    )}
                    additionalMobile={(variant, index) => (
                        <>
                            {isMobile && (
                                <AddOrEditImageButton
                                    imageSrc={variant.extendedText}
                                    onImageClick={() => {
                                        if (!("originalImageUrl" in variant)) return;

                                        setCurrentIndex(index);
                                        if (variant.extendedText) return openCropModal(
                                            variant.extendedText,
                                            variant.originalImageUrl
                                        );

                                        setIsUploadImageModalOpen(true);
                                    }}
                                    onPlusClick={() => {
                                        setCurrentIndex(index);
                                        setIsUploadImageModalOpen(true);
                                    }}
                                    sx={{ m: "8px", width: "auto" }}
                                />
                            )}
                        </>
                    )}
                />
                <UploadImageModal
                    open={isUploadImageModalOpen}
                    onClose={() => setIsUploadImageModalOpen(false)}
                    imgHC={uploadImage}
                />
                <CropModal
                    onSaveImageClick={url => {
                        const content = produce(question.content, draft => {
                            draft.variants[currentIndex].extendedText = url;
                        });
                        updateQuestionsList<QuizQuestionVarImg>(quizId, totalIndex, {
                            content,
                        });
                    }}
                />
                <Box
                    sx={{
                        width: "100%",
                        border: "1px solid #9A9AAF",
                        borderRadius: "8px",
                        display: isTablet ? "block" : "none",
                    }}
                >
                    <TextField
                        fullWidth
                        focused={false}
                        placeholder={"Добавьте ответ"}
                        multiline={question.content.largeCheck}
                        InputProps={{
                            startAdornment: (
                                <>
                                    <InputAdornment position="start">
                                        <PointsIcon
                                            style={{ color: "#9A9AAF", fontSize: "30px" }}
                                        />
                                    </InputAdornment>
                                    {!isMobile && (
                                        <Box
                                            sx={{
                                                width: "60px",
                                                height: "40px",
                                                background: "#EEE4FC",
                                                display: "flex",
                                                justifyContent: "space-between",
                                                marginRight: "20px",
                                                marginLeft: "12px",
                                            }}
                                        >
                                            <Box
                                                sx={{
                                                    display: "flex",
                                                    alignItems: "center",
                                                    justifyContent: "center",
                                                    width: "100%",
                                                }}
                                            >
                                                <ImageAddIcons fontSize="22px" color="#7E2AEA" />
                                            </Box>
                                            <span
                                                style={{
                                                    display: "flex",
                                                    alignItems: "center",
                                                    justifyContent: "center",
                                                    background: "#7E2AEA",
                                                    height: "100%",
                                                    width: "25px",
                                                    color: "white",
                                                    fontSize: "15px",
                                                }}
                                            >
                                                +
                                            </span>
                                        </Box>
                                    )}
                                </>
                            ),
                            endAdornment: (
                                <InputAdornment position="end">
                                    <IconButton
                                        sx={{ padding: "0" }}
                                        aria-describedby="my-popover-id"
                                    >
                                        <MessageIcon
                                            style={{
                                                color: "#9A9AAF",
                                                fontSize: "30px",
                                                marginRight: "6.5px",
                                            }}
                                        />
                                    </IconButton>
                                    <Popover
                                        id="my-popover-id"
                                        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
                                        open={false}
                                    >
                                        <TextareaAutosize
                                            style={{ margin: "10px" }}
                                            placeholder="Подсказка для этого ответа"
                                        />
                                    </Popover>
                                    <IconButton sx={{ padding: "0" }}>
                                        <DeleteIcon
                                            style={{
                                                color: theme.palette.grey2.main,
                                                marginRight: "-1px",
                                            }}
                                        />
                                    </IconButton>
                                </InputAdornment>
                            ),
                        }}
                        sx={{
                            "& .MuiInputBase-root": {
                                padding: "13.5px",
                                borderRadius: "10px",
                                background: "#ffffff",
                                height: "48px",
                            },
                            "& .MuiOutlinedInput-notchedOutline": {
                                border: "none",
                            },
                        }}
                        inputProps={{
                            sx: { fontSize: "18px", lineHeight: "21px", py: 0 },
                        }}
                    />

                    {isMobile && (
                        <Box
                            sx={{
                                display: "flex",
                                alignItems: "center",
                                m: "8px",
                                position: "relative",
                            }}
                        >
                            <Box
                                sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
                            />
                            <ImageAddIcons
                                style={{
                                    position: "absolute",
                                    color: "#7E2AEA",
                                    fontSize: "20px",
                                    left: "45%",
                                    right: "55%",
                                }}
                            />
                            <Box
                                sx={{
                                    display: "flex",
                                    justifyContent: "center",
                                    alignItems: "center",
                                    width: "20px",
                                    background: "#EEE4FC",
                                    height: "40px",
                                    color: "white",
                                    backgroundColor: "#7E2AEA",
                                }}
                            >
                                <Box
                                    sx={{ width: "100%", background: "#EEE4FC", height: "40px" }}
                                />
                                <ImageAddIcons
                                    style={{
                                        position: "absolute",
                                        color: "#7E2AEA",
                                        fontSize: "20px",
                                        left: "45%",
                                        right: "55%",
                                    }}
                                />
                                <Box
                                    sx={{
                                        display: "flex",
                                        justifyContent: "center",
                                        alignItems: "center",
                                        width: "20px",
                                        background: "#EEE4FC",
                                        height: "40px",
                                        color: "white",
                                        backgroundColor: "#7E2AEA",
                                    }}
                                >
                                    +
                                </Box>
                            </Box>
                        </Box>
                    )}
                </Box>
                <Box
                    sx={{
                        display: "flex",
                        alignItems: "center",
                        marginBottom: "17px",
                    }}
                >
                    <Link
                        component="button"
                        variant="body2"
                        sx={{
                            color: theme.palette.brightPurple.main,
                            fontWeight: "400",
                            fontSize: "16px",
                            mr: "4px",
                            height: "19px",
                        }}
                        onClick={() => {
                            const clonedContent = { ...question.content };
                            clonedContent.variants.push({
                                answer: "",
                                hints: "",
                                extendedText: "",
                                originalImageUrl: "",
                            });
                            updateQuestionsList<QuizQuestionVarImg>(quizId, totalIndex, {
                                content: clonedContent,
                            });
                        }}
                    >
                        Добавьте ответ
                    </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>
            <ButtonsOptionsAndPict
                switchState={switchState}
                SSHC={SSHC}
                totalIndex={totalIndex}
            />
            <SwitchOptionsAndPict switchState={switchState} totalIndex={totalIndex} />
        </>
    );
}