frontPanel/src/pages/ViewPublicationPage/Footer.tsx

import { useState, useEffect } from "react";
import { Box, Typography, Button, useTheme } from "@mui/material";

import { useQuizViewStore, getAnswersByQuestionId } from "@root/quizView";

import type { AnyTypedQuizQuestion, QuizQuestionBase } from "../../model/questionTypes/shared";
import { getQuestionByContentId } from "@root/questions/actions";
import { enqueueSnackbar } from "notistack";

type FooterProps = {
  setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
  question: QuizQuestionBase;
};

export const Footer = ({
  setCurrentQuestion,
  question,
}: FooterProps) => {
  const [disabledQuestionsId, setDisabledQuestionsId] = useState<Set<string>>(
    new Set()
  );
  const { answers } = useQuizViewStore();
  const theme = useTheme();

  const followPreviousStep = () => {
    if (question?.content.rule.parentId !== "root") {
      const parent = getQuestionByContentId(question?.content.rule.parentId)
      if (parent) {
        setCurrentQuestion(parent)
      } else {
        enqueueSnackbar("не могу получить предыдущий вопрос")
      }
    } else {
      enqueueSnackbar("вы находитесь на первом вопросе")
    }
  };

  const followNextStep = () => {
    const answers = getAnswersByQuestionId(question.content.id) || []
    console.log(answers)
    if (answers) {

        let readyBeNextQuestion = ""
      question.content.rule.main.forEach(({ next, rules }) => {
        console.log({ next, rules })

        console.log("[storeAnswers] ", rules[0].answers)
        console.log("[answers.answer] ", [answers.answer])

        let longerArray = Math.max(rules[0].answers.length, [answers.answer].length)

        for (var i = 0; i < longerArray; i++) // Цикл по всем эле­мен­там бОльшего массива
          if (rules[0].answers[i] !== [answers.answer][i]) readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны


      })
        if (readyBeNextQuestion) {
          console.log("мы нашли совпадение в " + readyBeNextQuestion)

          const nextQuestion = getQuestionByContentId(readyBeNextQuestion)
          console.log("next question ", nextQuestion)
          if (nextQuestion) {
            console.log("я устанавливаю следующий вопрос " + question.title)
            setCurrentQuestion(nextQuestion)
            return
          } else {
            enqueueSnackbar("не могу получить последующий вопрос")
          }
        } else {
          const nextQuestion = getQuestionByContentId(question.content.rule.default)
          console.log("я устанавливаю дефолтный вопрос")
          if (nextQuestion) {
            setCurrentQuestion(nextQuestion)
          } else {
            enqueueSnackbar("не могу получить последующий вопрос (дефолтный)")
          }
        }

    }

  };

  return (
    <Box
      sx={{
        padding: "15px 0",
        borderTop: `1px solid ${theme.palette.grey[400]}`,
      }}
    >
      <Box
        sx={{
          width: "100%",
          maxWidth: "1000px",
          padding: "0 10px",
          margin: "0 auto",
          display: "flex",
          alignItems: "center",
          gap: "10px",
        }}
      >
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            gap: "10px",
            marginRight: "auto",
            color: theme.palette.grey1.main,
          }}
        >
          {/* <Typography>Шаг</Typography>
          <Typography
            sx={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              fontWeight: "bold",
              borderRadius: "50%",
              width: "30px",
              height: "30px",
              color: "#FFF",
              background: theme.palette.brightPurple.main,
            }}
          >
            {stepNumber} */}
          {/* </Typography> */}
          {/* <Typography>Из</Typography>
          <Typography sx={{ fontWeight: "bold" }}>
            {questions.length}
          </Typography> */}
        </Box>
        <Button
          variant="contained"
          sx={{ fontSize: "16px", padding: "10px 15px" }}
          onClick={followPreviousStep}
        >
          ← Назад
        </Button>
        <Button
          variant="contained"
          sx={{ fontSize: "16px", padding: "10px 15px" }}
          onClick={followNextStep}
        >
          Далее →
        </Button>
      </Box>
    </Box>
  );
};