frontAnswerer/lib/components/ViewPublicationPage/questions/Varimg.tsx

import {
    Box,
    FormControlLabel,
    Radio,
    RadioGroup,
    Typography,
    useTheme,
} from "@mui/material";
import { useQuizViewStore } from "@stores/quizView";

import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";

import { sendAnswer } from "@api/quizRelase";
import BlankImage from "@icons/BlankImage";
import { useQuizData } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { enqueueSnackbar } from "notistack";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
import { useState } from "react";

type VarimgProps = {
    currentQuestion: QuizQuestionVarImg;
};

export const Varimg = ({ currentQuestion }: VarimgProps) => {
    const { settings, quizId, preview } = useQuizData();
    const answers = useQuizViewStore(state => state.answers);
    const deleteAnswer = useQuizViewStore(state => state.deleteAnswer);
    const updateAnswer = useQuizViewStore(state => state.updateAnswer);

    const theme = useTheme();
    const isMobile = useRootContainerSize() < 650;
    const [isSending, setIsSending] = useState<boolean>(false);

    const { answer } =
        answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
    const variant = currentQuestion.content.variants.find(
        ({ id }) => answer === id
    );

    return (
        <Box>
            <Typography
                variant="h5"
                color={theme.palette.text.primary}
                sx={{ wordBreak: "break-word" }}
            >
                {currentQuestion.title}
            </Typography>
            <Box
                sx={{
                    display: "flex",
                    marginTop: "20px",
                    flexDirection: isMobile ? "column-reverse" : undefined,
                    gap: "30px",
                    alignItems: isMobile ? "center" : undefined,
                }}
            >
                <RadioGroup
                    name={currentQuestion.id}
                    value={currentQuestion.content.variants.findIndex(
                        ({ id }) => answer === id
                    )}
                    sx={{
                        display: "flex",
                        flexWrap: "wrap",
                        flexDirection: "row",
                        justifyContent: "space-between",
                        flexBasis: "100%",
                        width: isMobile ? "100%" : undefined,
                    }}
                >
                    <Box
                        sx={{
                            display: "flex",
                            flexDirection: "column",
                            width: "100%",
                            gap: "20px",
                            "&:focus": { color: theme.palette.text.primary },
                            "&:active": { color: theme.palette.text.primary }
                        }}
                    >
                        {currentQuestion.content.variants.map((variant, index) => (
                            <FormControlLabel
                                key={variant.id}
                                disabled={isSending}
                                sx={{
                                    marginBottom: "15px",
                                    borderRadius: "12px",
                                    padding: "20px",
                                    color: theme.palette.text.primary,
                                    backgroundColor: settings.cfg.design
                                        ? quizThemes[settings.cfg.theme].isLight
                                            ? "#FFFFFF"
                                            : "rgba(255,255,255, 0.3)"
                                        : quizThemes[settings.cfg.theme].isLight
                                            ? "white"
                                            : theme.palette.background.default,
                                    border: `1px solid`,
                                    borderColor:
                                        answer === variant.id
                                            ? theme.palette.primary.main
                                            : "#9A9AAF",
                                    display: "flex",
                                    margin: 0,
                                    justifyContent: "space-between",
                                    "&:hover": { borderColor: theme.palette.primary.main },
                                    "& .MuiFormControlLabel-label": {
                                        wordBreak: "break-word",
                                        height: variant.answer.length <= 60 ? undefined : "60px",
                                        overflow: "auto",
                                        lineHeight: "normal",
                                        "&::-webkit-scrollbar": {
                                            width: "4px",
                                        },
                                        "&::-webkit-scrollbar-thumb": {
                                            backgroundColor: "#b8babf",
                                        },
                                    },
                                    "& .MuiFormControlLabel-label.Mui-disabled": {
                                        color: theme.palette.text.primary,
                                    }
                                }}
                                labelPlacement="start"
                                value={index}
                                onClick={async (event) => {
                                    event.preventDefault();

                                    setIsSending(true);
                                    try {
                                        await sendAnswer({
                                            questionId: currentQuestion.id,
                                            body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
                                            qid: quizId,
                                            preview
                                        });

                                        updateAnswer(
                                            currentQuestion.id,
                                            currentQuestion.content.variants[index].id,
                                            currentQuestion.content.variants[index].points || 0
                                        );
                                    } catch (e) {
                                        enqueueSnackbar("ответ не был засчитан");
                                    }

                                    if (answer === currentQuestion.content.variants[index].id) {
                                        try {
                                            await sendAnswer({
                                                questionId: currentQuestion.id,
                                                body: "",
                                                qid: quizId,
                                                preview
                                            });
                                        } catch (e) {
                                            enqueueSnackbar("ответ не был засчитан");
                                        }
                                        deleteAnswer(currentQuestion.id);
                                    }

                                    setIsSending(false);
                                }}
                                control={
                                    <Radio
                                        checkedIcon={
                                            <RadioCheck color={theme.palette.primary.main} />
                                        }
                                        icon={<RadioIcon />}
                                    />
                                }
                                label={variant.answer}
                            />
                        ))}
                    </Box>
                </RadioGroup>
                {/* {(variant?.extendedText || currentQuestion.content.back) && ( */}
                <Box
                    sx={{
                        maxWidth: "450px",
                        width: "100%",
                        height: "450px",
                        border: "1px solid #9A9AAF",
                        borderRadius: "12px",
                        overflow: "hidden",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        backgroundColor: "#9A9AAF30",
                        color: theme.palette.text.primary,
                        textAlign: "center",
                    }}
                >
                    {answer ? (
                        variant?.extendedText ? (
                            <img
                                src={variant?.extendedText}
                                style={{ width: "100%", height: "100%", objectFit: "cover" }}
                                alt=""
                            />
                        ) : (
                            <BlankImage />
                        )
                    ) : currentQuestion.content.back !== " " &&
                        currentQuestion.content.back !== null &&
                        currentQuestion.content.back.length > 0 ? (
                        <img
                            src={currentQuestion.content.back}
                            style={{ width: "100%", height: "100%", objectFit: "cover" }}
                            alt=""
                        />
                    ) : currentQuestion.content.replText !== " " &&
                        currentQuestion.content.replText.length > 0 ? (
                        currentQuestion.content.replText
                    ) : variant?.extendedText || isMobile ? (
                        "Выберите вариант ответа ниже"
                    ) : (
                        "Выберите вариант ответа слева"
                    )}
                </Box>
                {/* )} */}
            </Box>
        </Box>
    );
};