import { Box } from "@mui/material";
import { startTransition, useEffect, useLayoutEffect, useRef, useState } from "react";
import { QuizIdContext } from "@contexts/QuizIdContext";
import { RootContainerWidthContext } from "@contexts/RootContainerWidthContext";
import QuizAnswerer from "./QuizAnswerer";


interface Props {
    quizId: string;
}

export default function QuizView({ quizId }: Props) {
    const [rootContainerSize, setRootContainerSize] = useState<number>(() => window.innerWidth);
    const rootContainerRef = useRef<HTMLDivElement>(null);

    useLayoutEffect(() => {
        if (rootContainerRef.current) setRootContainerSize(rootContainerRef.current.clientWidth);
    }, []);

    useEffect(() => {
        const handleWindowResize = () => {
            startTransition(() => {
                if (rootContainerRef.current) setRootContainerSize(rootContainerRef.current.clientWidth);
            });
        };
        window.addEventListener("resize", handleWindowResize);

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

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