import type { SuspenseProps } from "react";
import { lazy, Suspense } from "react";
import {
  QuizResultsType,
  QuizStartpageType,
  QuizType,
} from "@model/quizSettings";

const ContactFormPage = lazy(
  () => import("../pages/ContactFormPage/ContactFormPage"),
);
const InstallQuiz = lazy(() => import("../pages/InstallQuiz/InstallQuiz"));
const FormQuestionsPage = lazy(
  () => import("../pages/Questions/Form/FormQuestionsPage"),
);
const QuestionsPage = lazy(() => import("../pages/Questions/QuestionsPage"));
const ResultPage = lazy(() => import("../pages/ResultPage/ResultPage"));
const StartPageSettings = lazy(
  () => import("../pages/startPage/StartPageSettings"),
);
const StepOne = lazy(() => import("../pages/startPage/stepOne"));
const Steptwo = lazy(() => import("../pages/startPage/steptwo"));

const LazyLoading = ({ children, fallback }: SuspenseProps) => (
  <Suspense fallback={fallback ?? <></>}>{children}</Suspense>
);
interface Props {
  activeStep: number;
  quizType: QuizType;
  quizStartPageType: QuizStartpageType;
  quizResults: QuizResultsType;
  openBranchingPage: boolean;
  setOpenBranchingPage: (a: boolean) => void;
  widthMain: number;
}

export default function SwitchStepPages({
  activeStep = 1,
  quizType,
  quizStartPageType,
  openBranchingPage,
  setOpenBranchingPage,
  widthMain,
}: Props) {
  switch (activeStep) {
    case 0: {
      if (!quizType)
        return (
          <LazyLoading>
            <StepOne />
          </LazyLoading>
        );
      if (!quizStartPageType)
        return (
          <LazyLoading>
            <Steptwo />
          </LazyLoading>
        );
      return (
        <LazyLoading>
          <StartPageSettings />
        </LazyLoading>
      );
    }
    case 1:
      return quizType === "form" ? (
        <LazyLoading>
          <FormQuestionsPage />
        </LazyLoading>
      ) : (
        <LazyLoading>
          <QuestionsPage
            openBranchingPage={openBranchingPage}
            setOpenBranchingPage={setOpenBranchingPage}
            widthMain={widthMain}
          />
        </LazyLoading>
      );
    case 2:
      return (
        <LazyLoading>
          <ResultPage />
        </LazyLoading>
      );
    case 3:
      return (
        <LazyLoading>
          <ContactFormPage />
        </LazyLoading>
      );
    case 4:
      return (
        <LazyLoading>
          <InstallQuiz />
        </LazyLoading>
      );
    default:
      throw new Error(`Invalid quiz setup step: ${activeStep}`);
  }
}
