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();


    return (
        <Box sx={{
            backgroundColor: theme.palette.background.default,
            height: "100%",
        }}>
            <Box sx={{
                height: "calc(100% - 75px)",
                width: "100%",
                maxWidth: "1440px",
                padding: "40px 25px 20px",
                margin: "0 auto",
                overflow: "auto",
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between"
            }}>
                <QuestionByType key={currentQuestion.id} question={currentQuestion} />
                {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 }: {
    question: RealTypedQuizQuestion;
}) {
    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: notReachable(question);
    }
}