frontAnswerer/src/pages/ViewPublicationPage/Footer.tsx

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

import type { AnyTypedQuizQuestion, QuizQuestionBase } from "../../model/questionTypes/shared";
import { useQuestionsStore } from "@root/quizData/store";
import { getQuestionById } from "@root/quizData/actions";
import { useQuizViewStore } from "@root/quizView/store";
import { enqueueSnackbar } from "notistack";
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";

type FooterProps = {
  setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
  question: AnyTypedQuizQuestion;
  setShowContactForm: (show: boolean) => void;
  setShowResultForm: (show: boolean) => void;
};

export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setShowResultForm }: FooterProps) => {
  const theme = useTheme();

  const { settings, items } = useQuestionsStore();
  const { answers } = useQuizViewStore();

  const [disablePreviousButton, setDisablePreviousButton] = useState<boolean>(false);
  const [disableNextButton, setDisableNextButton] = useState<boolean>(false);

  const linear = !items.find(({ content }) => content.rule.parentId === "root");
  console.log("linear ", linear)

  useEffect(() => {
    // Логика для аргумента disabled у кнопки "Назад"
    if (linear) {
      const questionIndex = items.findIndex(({ id }) => id === question.id);

      const previousQuestion = items[questionIndex - 1];

      if (previousQuestion) {
        setDisablePreviousButton(false);
      } else {
        setDisablePreviousButton(true);
      }
    } else {
      if (question?.content.rule.parentId === "root") {
        setDisablePreviousButton(true);
      } else {
        setDisablePreviousButton(false);
      }
    }

    // Логика для аргумента disabled у кнопки "Далее"
    const answer = answers.find(({ questionId }) => questionId === question.id);

    if ("required" in question.content && question.content.required && answer) {
      setDisableNextButton(false);

      return;
    }

    if ("required" in question.content && question.content.required && !answer) {
      setDisableNextButton(true);

      return;
    }

    if (linear) {
      return;
    }

    const nextQuestionId = getNextQuestionId();
    if (nextQuestionId) {
      setDisableNextButton(false);
    } else {
      const nextQuestion = getQuestionById(question.content.rule.default);

      if (nextQuestion?.type) {
        setDisableNextButton(false);
      }
    }
  }, [question, answers]);

  const showResult = (nextQuestion: any) => {
    console.log(nextQuestion);

    if (nextQuestion && settings?.cfg.resultInfo.when === "before") {
      setShowResultForm(true);
    } else {
      setShowContactForm(true);
    }
  };

  const getNextQuestionId = () => {
    if (answers.length) {
      const answer = answers.find(({ questionId }) => questionId === question.id);

      let readyBeNextQuestion = "";

      (question as QuizQuestionBase).content.rule.main.forEach(({ next, rules }) => {
        let longerArray = Math.max(
          rules[0].answers.length,
          answer?.answer && Array.isArray(answer?.answer) ? answer?.answer.length : [answer?.answer].length
        );

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

            return;
          }

          if (String(rules[0].answers[i]) === answer?.answer) {
            readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
          }
        }
      });

      return readyBeNextQuestion;
    }
  };

  const followPreviousStep = () => {
    if (linear) {
      const questionIndex = items.findIndex(({ id }) => id === question.id);

      const previousQuestion = items[questionIndex - 1];

      if (previousQuestion) {
        setCurrentQuestion(previousQuestion);
      }

      return;
    }

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

  const followNextStep = () => {
    if (linear) {
      const questionIndex = items.findIndex(({ id }) => id === question.id);
      const nextQuestion = items[questionIndex + 1];

      console.log(nextQuestion);
      if (nextQuestion && nextQuestion.type !== "result") {
        setCurrentQuestion(nextQuestion);
      } else {
        showResult(nextQuestion);
      }

      return;
    }

    const nextQuestionId = getNextQuestionId();

    if (nextQuestionId) {
      const nextQuestion = getQuestionById(nextQuestionId);

      if (nextQuestion?.type && nextQuestion.type !== "result") {
        setCurrentQuestion(nextQuestion);
        return;
      } else {
        enqueueSnackbar("не могу получить последующий вопрос");
      }
    } else {
      const nextQuestion = getQuestionById(question.content.rule.default);
      if (nextQuestion?.type && nextQuestion.type !== "result") {
        setCurrentQuestion(nextQuestion);
      } else {
        showResult(undefined);
      }
    }
  };

  return (
    <Box
      sx={{
        position: "relative",
        padding: "15px 0",
        borderTop: `1px solid ${theme.palette.grey[400]}`,
        height: '75px',
        display: "flex"
      }}
    >
      <Box
        sx={{
          width: "100%",
          maxWidth: "1000px",
          padding: "0 10px",
          margin: "0 auto",
          display: "flex",
          alignItems: "center",
          gap: "10px",
        }}
      >
        <NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} />
        <Box
          sx={{
            display: "flex",
            alignItems: "center",
            gap: "10px",
            marginRight: "auto",
            color: theme.palette.grey1.main,
          }}
        >
        </Box>
        <Button
          disabled={disablePreviousButton}
          variant="contained"
          sx={{ fontSize: "16px", padding: "10px 15px" }}
          onClick={followPreviousStep}
        >
          ← Назад
        </Button>
        <Button
          disabled={disableNextButton}
          variant="contained"
          sx={{ fontSize: "16px", padding: "10px 15px" }}
          onClick={followNextStep}
        >
          Далее →
        </Button>
      </Box>
    </Box>
  );
};