frontAnswerer/lib/components/ViewPublicationPage/ViewPublicationPage.tsx

import { Button, ThemeProvider } from "@mui/material";
import { useQuizViewStore } from "@stores/quizView";
import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
import { useQuizData } from "@utils/hooks/useQuizData";
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>
    );
}