import { useLayoutEffect, useState } from "react";
import { Box } from "@mui/material";

import { StartPageViewPublication } from "./StartPageViewPublication";
import { Question } from "./Question";
import { useQuestions } from "@root/questions/hooks";
import { useCurrentQuiz } from "@root/quizes/hooks";

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

export const ViewPage = () => {
  const quiz = useCurrentQuiz();
  const { questions } = useQuestions();
  console.log(questions)

  const [visualStartPage, setVisualStartPage] = useState<boolean>(!quiz?.config.noStartPage);


  const filteredQuestions = questions.filter(
    ({ type }) => type
  ) as AnyTypedQuizQuestion[];

  return (
    <Box>
      {visualStartPage ? (
        <StartPageViewPublication
          setVisualStartPage={setVisualStartPage}
          showNextButton={!!filteredQuestions.length}
        />
      ) : (
        <Question
          questions={filteredQuestions}
        />
      )}
    </Box>
  );
};