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

import { Footer } from "./Footer";
import { Text } from "./questions/Text";

import type { RealTypedQuizQuestion } from "../../model/questionTypes/shared";

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

import { DESIGN_LIST } from "@/utils/designList";
import { type ReactNode } from "react";
import { isProduction } from "@/utils/defineDomain";
import { useQuizStore } from "@/stores/useQuizStore";

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, quizId } = useQuizStore();

  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",
            }}
          >
            <Text
              currentQuestion={currentQuestion}
              stepNumber={currentQuestionStepNumber}
            />
            {show_badge && (
              <Link
                target="_blank"
                href={`https://${isProduction ? "" : "s"}quiz.pena.digital/answer/v1.0.0/logo?q=${quizId}`}
                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>
  );
};