import { Box } from "@mui/material";
import { 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 = "ef836ff8-35b1-4031-9acf-af5766bac2b2";

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

    useEffect(() => {
        const handleWindowResize = () => {
            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>
    );
}