import { getQuizData } from "@api/quizRelase";
import { Box } from "@mui/material";
import LoadingSkeleton from "@ui_kit/LoadingSkeleton";
import { useParams } from "react-router-dom";
import useSWR from "swr";
import QuizAnswerer from "../lib/components/QuizAnswerer";
import { ApologyPage } from "../lib/components/ViewPublicationPage/ApologyPage";

// const defaultQuizId = "45ef7f9c-784d-4e58-badb-f6b337f08ba0"; // branching
const defaultQuizId = "cde381db-8ccb-402c-b55f-2c814be9bf25"; //looooong header
// const defaultQuizId = "ad7f5a87-b833-4f5b-854e-453706ed655c"; // linear

export default function App() {
    const quizId = useParams().quizId ?? defaultQuizId;
    const { data, error, isLoading } = useSWR(["quizData", quizId], params => getQuizData(params[1]), {
        revalidateOnFocus: false,
        revalidateOnReconnect: false,
        shouldRetryOnError: false,
        refreshInterval: 0,
    });

    if (isLoading) return <LoadingSkeleton />;
    if (error) return <ApologyPage error={error} />;
    if (!data) throw new Error("Quiz data is null");

    return (
        <Box sx={{
            // height: "100dvh",
            height: "600px",
            width: "600px",
        }}>
            <QuizAnswerer
                quizSettings={data}
                quizId={quizId}
            />
        </Box>
    );
}