frontAnswerer/src/pages/ViewPublicationPage/Question.tsx

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

import { ContactForm } from "./ContactForm";
import { Footer } from "./Footer";
import { ResultForm } from "./ResultForm";
import { Date } from "./questions/Date";
import { Emoji } from "./questions/Emoji";
import { File } from "./questions/File";
import { Images } from "./questions/Images";
import { Number } from "./questions/Number";
import { Page } from "./questions/Page";
import { Rating } from "./questions/Rating";
import { Select } from "./questions/Select";
import { Text } from "./questions/Text";
import { Variant } from "./questions/Variant";
import { Varimg } from "./questions/Varimg";

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

import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
import { QuizQuestionResult } from "@model/questionTypes/result";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useQuizData } from "@utils/hooks/useQuizData";

export const Question = () => {
    const theme = useTheme();
    const { settings, questions } = useQuizData();
    const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
    const [showContactForm, setShowContactForm] = useState<boolean>(false);
    const [showResultForm, setShowResultForm] = useState<boolean>(false);
    const isMobile = useMediaQuery(theme.breakpoints.down(650));

    useEffect(() => {
        if (settings?.cfg.haveRoot) {//ветвимся
            const questionId = settings?.cfg.haveRoot || "";
            const nextQuestion = questions.find(q => q.id === questionId || q.content.id === questionId) || null;

            if (nextQuestion?.type) {
                setCurrentQuestion(nextQuestion);
                return;
            }

        } else {//идём прямо
            setCurrentQuestion(questions[0]);
        }
    }, []);

    if (!currentQuestion || currentQuestion.type === "result") return "не смог отобразить вопрос";

    return (
        <Box
            sx={{
                backgroundColor: theme.palette.background.default,
                height: isMobile ? undefined : "100vh"
            }}
        >
            {!showContactForm && !showResultForm && (
                <Box
                    sx={{
                        height: "calc(100vh - 75px)",
                        width: "100%",
                        maxWidth: "1440px",
                        padding: "40px 25px 20px",
                        margin: "0 auto",
                        overflow: "auto",
                        display: "flex",
                        flexDirection: "column",
                        justifyContent: "space-between"
                    }}
                >
                    <QuestionByType question={currentQuestion} />
                    {quizThemes[settings.cfg.theme].isLight ? (
                        <NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} />
                    ) : (
                        <NameplateLogoFQDark style={{ fontSize: "34px", width: "200px", height: "auto" }} />
                    )}
                </Box>
            )}
            {showResultForm && settings?.cfg.resultInfo.showResultForm === "before" && (
                <ResultForm
                    currentQuestion={currentQuestion}
                    showContactForm={showContactForm}
                    setShowContactForm={setShowContactForm}
                    setShowResultForm={setShowResultForm}
                />
            )}
            {showContactForm && (
                <ContactForm
                    currentQuestion={currentQuestion}
                    showResultForm={showResultForm}
                    setShowContactForm={setShowContactForm}
                    setShowResultForm={setShowResultForm}
                />
            )}
            {showResultForm && settings?.cfg.resultInfo.showResultForm === "after" && (
                <ResultForm
                    currentQuestion={currentQuestion}
                    showContactForm={showContactForm}
                    setShowContactForm={setShowContactForm}
                    setShowResultForm={setShowResultForm}
                />
            )}
            {!showContactForm && !showResultForm && (
                <Footer
                    question={currentQuestion}
                    setCurrentQuestion={setCurrentQuestion}
                    setShowContactForm={setShowContactForm}
                    setShowResultForm={setShowResultForm}
                />
            )}
        </Box>
    );
};

function QuestionByType({ question }: {
    question: Exclude<AnyTypedQuizQuestion, QuizQuestionResult>;
}) {
    switch (question.type) {
        case "variant": return <Variant currentQuestion={question} />;
        case "images": return <Images currentQuestion={question} />;
        case "varimg": return <Varimg currentQuestion={question} />;
        case "emoji": return <Emoji currentQuestion={question} />;
        case "text": return <Text currentQuestion={question} />;
        case "select": return <Select currentQuestion={question} />;
        case "date": return <Date currentQuestion={question} />;
        case "number": return <Number currentQuestion={question} />;
        case "file": return <File currentQuestion={question} />;
        case "page": return <Page currentQuestion={question} />;
        case "rating": return <Rating currentQuestion={question} />;
        default: return notReachable(question);
    }
}