import * as React from "react";

import AnswerOptions from "./answerOptions/AnswerOptions";
import OptionsPicture from "./OptionsPicture/OptionsPicture";
import DataOptions from "./DataOptions/DataOptions";
import SliderOptions from "./SliderOptions/SliderOptions";
import OwnTextField from "./OwnTextField/OwnTextField";
import PageOptions from "./PageOptions/PageOptions";
import OptionsAndPicture from "./OptionsAndPicture/OptionsAndPicture";
import RatingOptions from "./RatingOptions/RatingOptions";
import Emoji from "./Emoji/Emoji";
import DropDown from "./DropDown/DropDown";
import UploadFile from "./UploadFile/UploadFile";
import { useParams } from "react-router-dom";
import { questionStore } from "@root/questions";

interface Props {
  totalIndex: number;
}

export default function SwitchQuestionsPage({ totalIndex }: Props) {
  const quizId = Number(useParams().quizId);
  const { listQuestions } = questionStore();
  
  const switchState = listQuestions[quizId][totalIndex].type;
  switch (switchState) {
    case "variant":
      return <AnswerOptions totalIndex={totalIndex} />;

    case "images":
      return <OptionsPicture totalIndex={totalIndex} />;

    case "varimg":
      return <OptionsAndPicture totalIndex={totalIndex} />;

    case "emoji":
      return <Emoji totalIndex={totalIndex} />;

    case "text":
      return <OwnTextField totalIndex={totalIndex} />;

    case "select":
      return <DropDown totalIndex={totalIndex} />;

    case "date":
      return <DataOptions totalIndex={totalIndex} />;

    case "number":
      return <SliderOptions totalIndex={totalIndex} />;

    case "file":
      return <UploadFile totalIndex={totalIndex} />;

    case "page":
      return <PageOptions totalIndex={totalIndex} />;

    case "rating":
      return <RatingOptions totalIndex={totalIndex} />;

    default:
      return <></>;
  }
}