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 Desgin1 from "@icons/designs/design1.jpg";
import Desgin2 from "@icons/designs/design2.jpg";
import Desgin3 from "@icons/designs/design3.jpg";
import Desgin4 from "@icons/designs/design4.jpg";
import Desgin5 from "@icons/designs/design5.jpg";
import Desgin6 from "@icons/designs/design6.jpg";
import Desgin7 from "@icons/designs/design7.jpg";
import Desgin8 from "@icons/designs/design8.jpg";
import Desgin9 from "@icons/designs/design9.jpg";
import Desgin10 from "@icons/designs/design10.jpg";

import type { ReactNode } from "react";
import type { QuizTheme } from "@model/settingsData";

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

export const DESIGN_LIST: Record<QuizTheme, string> = {
  Design1: Desgin1,
  Design2: Desgin2,
  Design3: Desgin3,
  Design4: Desgin4,
  Design5: Desgin5,
  Design6: Desgin6,
  Design7: Desgin7,
  Design8: Desgin8,
  Design9: Desgin9,
  Design10: Desgin10,
  StandardTheme: "",
  StandardDarkTheme: "",
  PinkTheme: "",
  PinkDarkTheme: "",
  BlackWhiteTheme: "",
  OliveTheme: "",
  YellowTheme: "",
  GoldDarkTheme: "",
  PurpleTheme: "",
  BlueTheme: "",
  BlueDarkTheme: "",
};

export const Question = ({
  currentQuestion,
  currentQuestionStepNumber,
  nextButton,
  prevButton,
}: Props) => {
  const theme = useTheme();
  const { settings } = useQuizData();

  return (
    <Box
      sx={{
        backgroundPosition: "center",
        backgroundSize: "cover",
        backgroundImage: settings.cfg.design
          ? `url(${DESIGN_LIST[settings.cfg.theme]})`
          : null,
      }}
    >
      <Box
        sx={{
          background: settings.cfg.design
            ? "linear-gradient(90deg,#272626, transparent)"
            : theme.palette.background.default,
        }}
      >
        <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}
          />
          <Box sx={{ marginLeft: "auto" }}>
            {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>
        </Box>
        <Footer
          stepNumber={currentQuestionStepNumber}
          prevButton={prevButton}
          nextButton={nextButton}
        />
      </Box>
    </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);
  }
}