frontAnswerer/lib/components/ViewPublicationPage/ViewPublicationPage.tsx

import { ContactForm } from "@/components/ViewPublicationPage/ContactForm/ContactForm.tsx";
import { extractImageLinksFromQuestion } from "@/utils/extractImageLinks";
import { useVKMetrics } from "@/utils/hooks/metrics/useVKMetrics";
import { useYandexMetrics } from "@/utils/hooks/metrics/useYandexMetrics";
import { sendQuestionAnswer } from "@/utils/sendQuestionAnswer";
import { ThemeProvider, Typography } from "@mui/material";
import { useQuizViewStore } from "@stores/quizView";
import { statusOfQuiz, useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { enqueueSnackbar } from "notistack";
import { ReactElement, useEffect } from "react";
import { Helmet } from "react-helmet-async";
import { Question } from "./Question";
import QuestionSelect from "./QuestionSelect";
import { ResultForm } from "./ResultForm";
import { StartPageViewPublication } from "./StartPageViewPublication";
import NextButton from "./tools/NextButton";
import PrevButton from "./tools/PrevButton";
import unscreen from "@/ui_kit/unscreen";
import { changeNextLoading, useQuizStore } from "@/stores/useQuizStore";
import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";

console.log("🚀 ViewPublicationPage: Component module loaded");

polyfillCountryFlagEmojis();

export default function ViewPublicationPage() {
  console.log("🔧 ViewPublicationPage: Component function called");

  const { settings, recentlyCompleted, quizId, preview, changeFaviconAndTitle } = useQuizStore();
  const answers = useQuizViewStore((state) => state.answers);
  const ownVariants = useQuizViewStore((state) => state.ownVariants);
  let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
  const {
    currentQuestion,
    currentQuestionStepNumber,
    nextQuestion,
    isNextButtonEnabled,
    isPreviousButtonEnabled,
    moveToPrevQuestion,
    moveToNextQuestion,
    showResultAfterContactForm,
    setQuestion,
  } = useQuestionFlowControl();
  useYandexMetrics(settings?.cfg?.yandexMetricsNumber, preview);
  useVKMetrics(settings?.cfg?.vkMetricsNumber, preview);

  console.log("🔍 ViewPublicationPage: Component state initialized");
  console.log("🔍 ViewPublicationPage: currentQuizStep:", currentQuizStep);
  console.log("🔍 ViewPublicationPage: currentQuestion:", currentQuestion);

  useEffect(() => {
    console.log("🔧 ViewPublicationPage: unscreen effect triggered");
    const root = document.getElementById("root");
    const overlay = document.getElementById("hideoverlay");

    if (!settings.cfg?.isUnSc) overlay?.remove();

    if (root !== null && overlay !== null && settings.cfg?.isUnSc) {
      unscreen(overlay, root);
    }
  }, []);

  useEffect(
    function setFaviconAndTitle() {
      if (!changeFaviconAndTitle) return;

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

      document.title = settings.name;
    },
    [changeFaviconAndTitle, settings.cfg.startpage.favIcon, settings.name]
  );

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

  if (!currentQuestion) {
    console.log("🔍 ViewPublicationPage: No current question, rendering error");
    return (
      <ThemeProvider theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}>
        <Typography
          textAlign={"center"}
          mt="50px"
        >
          Вопрос не выбран
        </Typography>
      </ThemeProvider>
    );
  }

  const currentAnswer = answers.find(({ questionId }) => questionId === currentQuestion.id);

  console.log("🔍 ViewPublicationPage: About to render quiz step:", currentQuizStep);

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

      console.log("🔍 ViewPublicationPage: Rendering question");
      quizStepElement = (
        <Question
          key={currentQuestion.id}
          currentQuestion={currentQuestion}
          currentQuestionStepNumber={currentQuestionStepNumber}
          prevButton={
            <PrevButton
              isPreviousButtonEnabled={isPreviousButtonEnabled}
              moveToPrevQuestion={moveToPrevQuestion}
            />
          }
          nextButton={
            <NextButton
              isNextButtonEnabled={settings.status === "ai" || isNextButtonEnabled}
              moveToNextQuestion={async () => {
                if (statusOfQuiz == "ai") changeNextLoading(true);
                if (!preview) {
                  await sendQuestionAnswer(quizId, currentQuestion, currentAnswer, ownVariants)?.catch((e) => {
                    enqueueSnackbar("Ошибка при отправке ответа");
                    console.error("Error sending answer", e);
                  });
                }
                moveToNextQuestion();
              }}
            />
          }
          questionSelect={
            <QuestionSelect
              selectedQuestion={currentQuestion}
              setQuestion={setQuestion}
            />
          }
        />
      );
      break;
    }
    case "contactform": {
      quizStepElement = (
        <ContactForm
          currentQuestion={currentQuestion}
          onShowResult={showResultAfterContactForm}
        />
      );
      break;
    }
    default:
      notReachable(currentQuizStep);
  }

  const preloadLinks = new Set([
    ...extractImageLinksFromQuestion(currentQuestion),
    ...extractImageLinksFromQuestion(nextQuestion),
  ]);

  return (
    <ThemeProvider theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}>
      <Helmet>
        {Array.from(preloadLinks).map((link) => (
          <link
            key={link}
            rel="preload"
            as="image"
            href={link}
          />
        ))}
      </Helmet>
      {quizStepElement}
    </ThemeProvider>
  );
}