frontAnswerer/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx

import { Box, FormControl, FormControlLabel, Radio, Typography, useTheme } from "@mui/material";
import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
import { enqueueSnackbar } from "notistack";

import { useQuizViewStore } from "@stores/quizView";
import { sendAnswer } from "@api/quizRelase";
import { useQuizData } 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 { QuizQuestionEmoji } from "@model/questionTypes/emoji";

polyfillCountryFlagEmojis();

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

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

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

    setIsSending(true);
    try {
      await sendAnswer({
        questionId: currentQuestion.id,
        body:
          currentQuestion.content.variants[index].extendedText + " " + currentQuestion.content.variants[index].answer,
        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 (
    <FormControl
      key={index}
      disabled={isSending}
      sx={{
        borderRadius: "12px",
        border: `1px solid`,
        borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
        overflow: "hidden",
        maxWidth: "317px",
        width: "100%",
        height: "255px",
        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",
        "&:hover": { borderColor: theme.palette.primary.main },
      }}
      // value={index}
      onClick={onVariantClick}
    >
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          height: "193px",
          background: "#ffffff",
          cursor: "pointer",
        }}
      >
        <Box
          sx={{
            width: "100%",
            display: "flex",
            justifyContent: "center",
          }}
        >
          {variant.extendedText && <Typography fontSize="100px">{variant.extendedText}</Typography>}
        </Box>
      </Box>
      <FormControlLabel
        key={variant.id}
        sx={{
          margin: 0,
          padding: "15px",
          color: theme.palette.text.primary,
          display: "flex",
          gap: "10px",
          alignItems: variant.answer.length <= 60 ? "center" : "flex-start",
          position: "relative",
          height: "80px",
          justifyContent: "center",
          "& .MuiFormControlLabel-label": {
            wordBreak: "break-word",
            height: variant.answer.length <= 60 ? undefined : "60px",
            overflow: "auto",
            "&::-webkit-scrollbar": { width: "4px" },
            "&::-webkit-scrollbar-thumb": {
              backgroundColor: "#b8babf",
            },
          },
          "& .MuiFormControlLabel-label.Mui-disabled": {
            color: theme.palette.text.primary,
          },
        }}
        value={index}
        control={
          <Radio
            checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
            icon={<RadioIcon />}
            sx={{ position: "absolute", top: "-162px", right: "12px" }}
          />
        }
        label={
          <Box sx={{ display: "flex", gap: "10px" }}>
            <Typography sx={{ wordBreak: "break-word", lineHeight: "normal" }}>{variant.answer}</Typography>
          </Box>
        }
      />
    </FormControl>
  );
};