frontAnswerer/lib/components/ViewPublicationPage/PointSystemResultList.tsx

import { IncorrectAnswer } from "@/assets/icons/IncorrectAnswer";
import { CorrectAnswer } from "@/assets/icons/CorrectAnswer";
import { Box, Typography, useTheme } from "@mui/material";
import { useQuizViewStore } from "@/stores/quizView";
import { AnyTypedQuizQuestion, QuizQuestionVariant } from "@/index";
import { useTranslation } from "react-i18next";
import { useQuizStore } from "@/stores/useQuizStore";

const dinocrutch = window.location.pathname === "/413b9e24-996a-400e-9076-c158f64b9bd7";

// Функция для определения вопроса "спасибо"
const isThankYouQuestion = (question: QuizQuestionVariant): boolean => {
  // Проверяем что у вопроса только один вариант ответа
  if (question.content.variants.length !== 1) {
    return false;
  }

  // Проверяем что текст варианта полностью состоит из слова "спасибо"
  const variant = question.content.variants[0];
  const answerText = variant.answer.toLowerCase().trim();

  // Проверяем точное совпадение со словом "спасибо"
  return answerText === "спасибо";
};

export const PointSystemResultList = () => {
  const theme = useTheme();
  const { questions } = useQuizStore();
  const answers = useQuizViewStore((state) => state.answers);
  const { t } = useTranslation();

  const questionsWothoutResult = questions.filter<QuizQuestionVariant>(
    (q: AnyTypedQuizQuestion): q is QuizQuestionVariant => q.type === "variant"
  );

  // Фильтруем вопросы "спасибо" только для указанного квиза
  const filteredQuestions = dinocrutch
    ? questionsWothoutResult.filter((q) => !isThankYouQuestion(q))
    : questionsWothoutResult;

  return filteredQuestions.map((currentQuestion) => {
    let answerIndex = 0;
    let currentVariants = currentQuestion.content.variants;

    const currentAnswer = answers.find((a) => a.questionId === currentQuestion.id);
    const answeredVariant = currentVariants.find((v, i) => {
      if (v.id === currentAnswer?.answer) {
        answerIndex = i;
        return true;
      }
    });

    return (
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
        }}
      >
        <Box
          sx={{
            display: "inline-flex",
            justifyContent: "space-between",
            width: "100%",
          }}
        >
          <Box
            sx={{
              display: "inline-flex",
              gap: "16px",
            }}
          >
            <Typography
              sx={{
                color: theme.palette.grey[500],
              }}
            >
              {currentQuestion.page + 1}.
            </Typography>
            <Typography
              sx={{
                color: theme.palette.text.primary,
              }}
            >
              {currentQuestion.title || t("Question without a title")}
            </Typography>
          </Box>
          <Typography
            sx={{
              color: answeredVariant?.points ? theme.palette.primary.main : theme.palette.grey[500],
            }}
          >
            {answeredVariant?.points || "0"}
          </Typography>
        </Box>
        <Box
          sx={{
            display: "inline-flex",
            mt: "15px",
            gap: "10px",
          }}
        >
          <Typography
            sx={{
              color: theme.palette.grey[500],
            }}
          >
            {t("Your answer")}:
          </Typography>
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
            }}
          >
            <Line
              checkTrue={Boolean(answeredVariant?.points)}
              text={answeredVariant?.answer}
            />
            {/* {Boolean(answeredVariant?.points) ? <CorrectAnswer /> : <IncorrectAnswer />}
                        <Typography>{answeredVariant?.answer || "не выбрано"}</Typography> */}
            {currentVariants.map((v) => {
              if (v.id === currentAnswer?.answer) {
                return <></>;
              } else
                return (
                  <Line
                    checkTrue={Boolean(v?.points)}
                    text={v.answer}
                  />
                );
            })}
          </Box>
        </Box>
      </Box>
    );
  });
};

interface LineProps {
  checkTrue: boolean;
  text?: string;
}

const Line = ({ checkTrue, text }: LineProps) => {
  const theme = useTheme();

  return (
    <Box
      sx={{
        display: "inline-flex",
        gap: "10px",
        mb: "10px",
      }}
    >
      {checkTrue ? <CorrectAnswer /> : <IncorrectAnswer />}
      <Typography
        sx={{
          color: theme.palette.grey[500],
        }}
      >
        {text || "не выбрано"}
      </Typography>
    </Box>
  );
};