import { Box } from "@mui/material";

import { Variant } from "./questions/Variant";
import { Images } from "./questions/Images";
import { Varimg } from "./questions/Varimg";
import { Emoji } from "./questions/Emoji";
import { Text } from "./questions/Text";
import { Select } from "./questions/Select";
import { Date } from "./questions/Date";
import { Number } from "./questions/Number";
import { File } from "./questions/File";
import { Page } from "./questions/Page";
import { Rating } from "./questions/Rating";
import { Footer } from "./Footer";

import type { FC } from "react";
import type { QuestionType } from "../../model/question/question";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";

type QuestionProps = {
  stepNumber: number;
  setStepNumber: (step: number) => void;
  questions: AnyTypedQuizQuestion[];
};

const QUESTIONS_MAP: Record<
  Exclude<QuestionType, "nonselected">,
  FC<{ stepNumber: number; question: any }>
> = {
  variant: Variant,
  images: Images,
  varimg: Varimg,
  emoji: Emoji,
  text: Text,
  select: Select,
  date: Date,
  number: Number,
  file: File,
  page: Page,
  rating: Rating,
};

export const Question = ({
  stepNumber,
  setStepNumber,
  questions,
}: QuestionProps) => {
  const question = questions[stepNumber - 1] as AnyTypedQuizQuestion;
  const QuestionComponent =
    QUESTIONS_MAP[question.type as Exclude<QuestionType, "nonselected">];

  return (
    <Box>
      <Box
        sx={{
          minHeight: "calc(100vh - 75px)",
          width: "100%",
          maxWidth: "1000px",
          padding: "20px 10px 0",
          margin: "0 auto",
        }}
      >
        <QuestionComponent question={question} stepNumber={stepNumber} />
      </Box>
      <Footer
        stepNumber={stepNumber}
        setStepNumber={setStepNumber}
        questions={questions}
      />
    </Box>
  );
};