frontAnswerer/src/pages/ViewPublicationPage/Question.tsx

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

import { useQuestionsStore } from "@stores/quizData/store"
import { getQuestionById } from "@stores/quizData/actions";

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

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

import {NameplateLogoFQ} from "@icons/NameplateLogoFQ";
import {NameplateLogoFQDark} from "@icons/NameplateLogoFQDark";
import {modes} from "../../utils/themes/Publication/themePublication";

type QuestionProps = {
  questions: AnyTypedQuizQuestion[];
};

const QUESTIONS_MAP: any = {
  variant: Variant,
  images: Images,
  varimg: Varimg,
  emoji: Emoji,
  text: Text,
  select: Select,
  date: Date,
  number: Number,
  file: File,
  page: Page,
  rating: Rating,
};

export const Question = ({ questions }: QuestionProps) => {
  const { settings } = useQuestionsStore()
  const theme = useTheme();  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
  const [showContactForm, setShowContactForm] = useState<boolean>(false);
  const [showResultForm, setShowResultForm] = useState<boolean>(false);
  const mode = modes;
  console.log("currentQuestion ", currentQuestion)
  useEffect(() => {

    if (settings?.cfg.haveRoot) {//ветвимся
      const nextQuestion = getQuestionById(settings?.cfg.haveRoot || "");

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

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

  }, []);

  if (!currentQuestion) return <>не смог отобразить вопрос</>;

  const QuestionComponent =
    QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];

  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"
          }}
        >
          <QuestionComponent currentQuestion={currentQuestion} />
          {mode[settings?.cfg.theme] ? (
            <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>
  );

};