import { Box } from "@mui/material";
import { startTransition, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { QuizIdContext } from "@contexts/QuizIdContext";
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
import QuizAnswerer from "../lib/components/QuizAnswerer";

const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // branching
//const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; //looooong header
// const defaultQuizId = "a9d31460-132a-4479-a3f0-90241498b6f9"; // linear

export default function App() {
    const quizId = useParams().quizId ?? defaultQuizId;
    const [rootContainerSize, setRootContainerSize] = useState<number>(() => window.innerWidth);

  useEffect(() => {
    const handleWindowResize = () => {
      startTransition(() => {
        setRootContainerSize(window.innerWidth);
      });
    };
    window.addEventListener("resize", handleWindowResize);

    return () => {
      window.removeEventListener("resize", handleWindowResize);
    };
  }, []);

  return (
    <RootContainerWidthContext.Provider value={rootContainerSize}>
      <QuizIdContext.Provider value={quizId}>
        <Box
          sx={{
            height: "100dvh",
          }}
        >
          <QuizAnswerer />
        </Box>
      </QuizIdContext.Provider>
    </RootContainerWidthContext.Provider>
  );
}