frontAnswerer/lib/components/ViewPublicationPage/Question.tsx

import { Box, Link, useTheme } from "@mui/material";

import { Footer } from "./Footer";
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 { RealTypedQuizQuestion } from "../../model/questionTypes/shared";

import { useQuizData } from "@contexts/QuizDataContext";
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { ReactNode } from "react";

type Props = {
  currentQuestion: RealTypedQuizQuestion;
  currentQuestionStepNumber: number | null;
  nextButton: ReactNode;
  prevButton: ReactNode;
};

export const Question = ({
  currentQuestion,
  currentQuestionStepNumber,
  nextButton,
  prevButton,
}: Props) => {
  const theme = useTheme();
  const { settings } = useQuizData();
  console.log(currentQuestionStepNumber);
  return (
    <Box
      sx={{
        backgroundColor: theme.palette.background.default,
        height: "100%",
      }}
    >
      <Box
        sx={{
          height: "calc(100% - 75px)",
          width: "100%",
          minHeight: "calc(100vh - 75px)",
          maxWidth: "1440px",
          padding: "40px 25px 20px",
          margin: "0 auto",
          overflow: "auto",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
        }}
      >
        <QuestionByType
          key={currentQuestion.id}
          question={currentQuestion}
          stepNumber={currentQuestionStepNumber}
        />
        {quizThemes[settings.cfg.theme].isLight ? (
          <Link target={"_blank"} href={"https://quiz.pena.digital"}>
            <NameplateLogoFQ
              style={{ fontSize: "34px", width: "200px", height: "auto" }}
            />
          </Link>
        ) : (
          <Link target={"_blank"} href={"https://quiz.pena.digital"}>
            <NameplateLogoFQDark
              style={{ fontSize: "34px", width: "200px", height: "auto" }}
            />
          </Link>
        )}
      </Box>
      <Footer
        stepNumber={currentQuestionStepNumber}
        prevButton={prevButton}
        nextButton={nextButton}
      />
    </Box>
  );
};

function QuestionByType({
  question,
  stepNumber,
}: {
  question: RealTypedQuizQuestion;
  stepNumber: number | null;
}) {
  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} stepNumber={stepNumber} />;
    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:
      notReachable(question);
  }
}