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

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

import type { QuizQuestionBase } from "../../model/questionTypes/shared";

type FooterProps = {
  stepNumber: number;
  setStepNumber: (step: number) => void;
  questions: QuizQuestionBase[];
};

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

  useEffect(() => {
    clearDisabledQuestions();

    const disabledIds = [] as string[];

    const newDisabledIds = new Set([...disabledQuestionsId, ...disabledIds]);
    setDisabledQuestionsId(newDisabledIds);
  }, [answers]);

  const clearDisabledQuestions = () => {
    const cleanDisabledQuestions = new Set<string>();

    answers.forEach(({ step, answer }) => {
      questions[step - 1].content.rule.main.forEach(({ next, rules }) => {
        rules.forEach(({ answers }) => {
          if (answer !== answers[0]) {
            cleanDisabledQuestions.add(next);
          }
        });
      });
    });

    setDisabledQuestionsId(cleanDisabledQuestions);
  };

  const followPreviousStep = () => {
    setStepNumber(stepNumber - 1);
  };

  const followNextStep = () => {
    setStepNumber(stepNumber + 1);
  };

  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"
          disabled={stepNumber <= 1}
          sx={{ fontSize: "16px", padding: "10px 15px" }}
          onClick={followPreviousStep}
        >
          ← Назад
        </Button>
        <Button
          variant="contained"
          disabled={questions.length <= stepNumber}
          sx={{ fontSize: "16px", padding: "10px 15px" }}
          onClick={followNextStep}
        >
          Далее →
        </Button>
      </Box>
    </Box>
  );
};
