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 { DESIGN_LIST } from "@/utils/designList";
import type { ReactNode } from "react";

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

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

    return (
        <Box
            sx={{
                height: "100%",
                backgroundPosition: "center",
                backgroundSize: "cover",
                backgroundImage: settings.cfg.design
                    ? `url(${DESIGN_LIST[settings.cfg.theme]})`
                    : null,
            }}
        >
            <Box
                sx={{
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                    background: settings.cfg.design
                        ? quizThemes[settings.cfg.theme].isLight
                            ? "transparent"
                            : "linear-gradient(90deg,#272626, transparent)"
                        : theme.palette.background.default,
                    overflow: "hidden"
                }}
            >
                <Box
                    sx={{
                        overflow: "auto",
                        width: "100%",
                        flexGrow: 1,
                        scrollbarWidth: "none",
                        "&::-webkit-scrollbar": {
                            width: 0,
                        },
                    }}
                >
                    <Box
                        sx={{
                            width: "100%",
                            minHeight: "100%",
                            maxWidth: "1440px",
                            padding: "40px 25px 20px",
                            margin: "0 auto",
                            display: "flex",
                            flexDirection: "column",
                            justifyContent: "space-between",
                        }}
                    >
                        <QuestionByType
                            key={currentQuestion.id}
                            question={currentQuestion}
                            stepNumber={currentQuestionStepNumber}
                        />
                        {show_badge && (
                            <Link
                                target="_blank"
                                href="https://quiz.pena.digital"
                                sx={{
                                    mt: "20px",
                                    alignSelf: "end",
                                }}
                            >
                                {quizThemes[settings.cfg.theme].isLight ? (
                                    <NameplateLogoFQ
                                        style={{
                                            fontSize: "34px",
                                            width: "200px",
                                            height: "auto",
                                        }}
                                    />
                                ) : (
                                    <NameplateLogoFQDark
                                        style={{
                                            fontSize: "34px",
                                            width: "200px",
                                            height: "auto",
                                        }}
                                    />
                                )}
                            </Link>
                        )}
                    </Box>
                </Box>
                {questionSelect}
                <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);
    }
}