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 = "45ef7f9c-784d-4e58-badb-f6b337f08ba0";

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>
    );
}