import Level from "@/exams/Level";
import Listening from "@/exams/Listening";
import Reading from "@/exams/Reading";
import Speaking from "@/exams/Speaking";
import Writing from "@/exams/Writing";
import { usePersistentStorage } from "@/hooks/usePersistentStorage";
import { LevelExam, ListeningExam, ReadingExam, SpeakingExam, WritingExam } from "@/interfaces/exam";
import { User } from "@/interfaces/user";
import { usePersistentExamStore } from "@/stores/exam";
import clsx from "clsx";
import { useEffect } from "react";

// TODO: perms

const Popout: React.FC<{ user: User }> = ({ user }) => {
    const { bgColor, exam, partIndex, setUserSolutions } = usePersistentExamStore();
    usePersistentStorage(usePersistentExamStore);

    useEffect(() => {
        return () => {
            setUserSolutions([]);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    return (
        <div className={`relative flex w-full min-h-screen p-4 shadow-md items-center rounded-2xl ${bgColor}`}>
            <div className={clsx("relative flex p-20 justify-center flex-1")}>
                {exam?.module == "level" && exam.parts && partIndex >= 0 &&
                    <Level exam={exam as LevelExam} preview={true} />
                }
                {exam?.module == "writing" && exam.exercises && partIndex >= 0 &&
                    <Writing exam={exam as WritingExam} preview={true} />
                }
                {exam?.module == "reading" && exam.parts.length > 0 &&
                    <Reading exam={exam as ReadingExam} preview={true} />
                }
                {exam?.module == "listening" && exam.parts.length > 0 &&
                    <Listening exam={exam as ListeningExam} preview={true} />
                }
                {exam?.module == "speaking" && exam.exercises.length > 0 &&
                    <Speaking exam={exam as SpeakingExam} preview={true} />
                }
            </div>
        </div>
    );
};
export default Popout;
