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 = "0c568ac9-d176-491b-b6cd-5afd31254951"; // branching
//const defaultQuizId = "9ed8d0e9-d355-4fc1-8b89-4f962e3efc52"; //looooong header
// const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // 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>
  );
}