import { IncorrectAnswer } from "@/assets/icons/IncorrectAnswer";
import { CorrectAnswer } from "@/assets/icons/CorrectAnswer";
import { Box, Typography, useTheme } from "@mui/material";
import { useQuizSettings } from "@/contexts/QuizDataContext";
import { useQuizViewStore } from "@/stores/quizView";
import { AnyTypedQuizQuestion, QuizQuestionVariant } from "@/index";

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

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

  return questionsWothoutResult.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 || "Вопрос без названия"}
            </Typography>
          </Box>
          <Typography
            sx={{
              color: answeredVariant?.points ? "inherit" : theme.palette.grey[500],
            }}
          >
            {answeredVariant?.points || "0"}/10
          </Typography>
        </Box>
        <Box
          sx={{
            display: "inline-flex",
            mt: "15px",
            gap: "10px",
          }}
        >
          <Typography
            sx={{
              color: theme.palette.grey[500],
            }}
          >
            Ваш ответ:
          </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>
  );
};