import { Button, ThemeProvider } from "@mui/material";
import { useQuizViewStore } from "@stores/quizView";
import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
import { useQuizData } from "@contexts/QuizDataContext";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { ReactElement, useEffect } from "react";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import { ContactForm } from "./ContactForm";
import { Question } from "./Question";
import { ResultForm } from "./ResultForm";
import { StartPageViewPublication } from "./StartPageViewPublication";

export default function ViewPublicationPage() {
  const { settings, recentlyCompleted } = useQuizData();
  let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
  const isMobileMini = useRootContainerSize() < 382;
  const {
    currentQuestion,
    currentQuestionStepNumber,
    isNextButtonEnabled,
    isPreviousButtonEnabled,
    moveToPrevQuestion,
    moveToNextQuestion,
    showResultAfterContactForm,
  } = useQuestionFlowControl();

  useEffect(
    function setFaviconAndTitle() {
      const link = document.querySelector('link[rel="icon"]');
      if (link && settings.cfg.startpage.favIcon) {
        link.setAttribute("href", settings.cfg.startpage.favIcon);
      }

      document.title = settings.name;
    },
    [settings]
  );

  if (recentlyCompleted) throw new Error("Quiz already completed");
  if (currentQuizStep === "startpage" && settings.cfg.noStartPage)
    currentQuizStep = "question";

  let quizStepElement: ReactElement;
  switch (currentQuizStep) {
    case "startpage": {
      quizStepElement = <StartPageViewPublication />;
      break;
    }
    case "question": {
      if (currentQuestion.type === "result") {
        quizStepElement = <ResultForm resultQuestion={currentQuestion} />;
        break;
      }

      quizStepElement = (
        <Question
          currentQuestion={currentQuestion}
          currentQuestionStepNumber={currentQuestionStepNumber}
          prevButton={
            <Button
              disabled={!isPreviousButtonEnabled}
              variant="contained"
              sx={{ fontSize: "16px", padding: "10px 15px" }}
              onClick={moveToPrevQuestion}
            >
              {isMobileMini ? "←" : "← Назад"}
            </Button>
          }
          nextButton={
            <Button
              disabled={!isNextButtonEnabled}
              variant="contained"
              sx={{ fontSize: "16px", padding: "10px 15px" }}
              onClick={moveToNextQuestion}
            >
              Далее →
            </Button>
          }
        />
      );
      break;
    }
    case "contactform": {
      quizStepElement = (
        <ContactForm
          currentQuestion={currentQuestion}
          onShowResult={showResultAfterContactForm}
        />
      );
      break;
    }
    default:
      notReachable(currentQuizStep);
  }

  return (
    <ThemeProvider
      theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
    >
      {quizStepElement}
    </ThemeProvider>
  );
}