frontAnswerer/lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx

import { Box, FormControlLabel, Radio, useTheme } from "@mui/material";
import { enqueueSnackbar } from "notistack";

import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@stores/quizView";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";

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

import type { MouseEvent } from "react";
import type { QuestionVariant } from "@/model/questionTypes/shared";
import type { QuizQuestionImages } from "@model/questionTypes/images";

type ImagesProps = {
  currentQuestion: QuizQuestionImages;
  variant: QuestionVariant;
  isSending: boolean;
  setIsSending: (isSending: boolean) => void;
  index: number;
};

export const ImageVariant = ({ currentQuestion, variant, isSending, setIsSending, index }: ImagesProps) => {
  const { settings, quizId, preview } = useQuizSettings();
  const answers = useQuizViewStore((state) => state.answers);
  const { deleteAnswer, updateAnswer } = useQuizViewStore((state) => state);
  const theme = useTheme();
  const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer;

  const onVariantClick = async (event: MouseEvent<HTMLDivElement>) => {
    event.preventDefault();
    if (isSending) return;

    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 (error) {
      enqueueSnackbar("ответ не был засчитан");
    }

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

    setIsSending(false);
  };

  return (
    <Box
      sx={{
        cursor: "pointer",
        borderRadius: "12px",
        border: `1px solid`,
        borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
        "&:hover": { borderColor: theme.palette.primary.main },
        background:
          settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
            ? "rgba(255,255,255, 0.3)"
            : (settings.cfg.design && quizThemes[settings.cfg.theme].isLight) || quizThemes[settings.cfg.theme].isLight
              ? "#FFFFFF"
              : "transparent",
      }}
      onClick={onVariantClick}
    >
      <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
        <Box sx={{ width: "100%", height: "300px" }}>
          {variant.extendedText && (
            <img
              src={variant.extendedText}
              alt=""
              style={{
                display: "block",
                width: "100%",
                height: "100%",
                objectFit: "cover",
                borderRadius: "12px 12px 0 0",
              }}
            />
          )}
        </Box>
      </Box>
      <FormControlLabel
        key={variant.id}
        sx={{
          textAlign: "center",
          color: theme.palette.text.primary,
          marginTop: "10px",
          marginLeft: 0,
          padding: "10px",
          display: "flex",
          alignItems: variant.answer.length <= 60 ? "center" : "flex-start",
          justifyContent: "center",
          position: "relative",
          height: "80px",
          "& .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",
            },
          },
        }}
        value={index}
        control={
          <Radio
            checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
            icon={<RadioIcon />}
            sx={{
              position: "absolute",
              top: "-297px",
              right: 0,
            }}
          />
        }
        label={variant.answer}
      />
    </Box>
  );
};