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

 const defaultQuizId = "48471ba0-a639-4be2-91e3-50149c4b73af"; // branching
//const defaultQuizId = "9ed8d0e9-d355-4fc1-8b89-4f962e3efc52"; //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>
    );
}