import useExamEditorStore from "@/stores/examEditor";
import ListeningContext from "./listening";
import ReadingContext from "./reading";
import GenLoader from "../../Exercises/Shared/GenLoader";

interface Props {
    sectionId: number;
}

const LevelContext: React.FC<Props> = ({ sectionId }) => {
    const { currentModule } = useExamEditorStore();
    const { generating, readingSection, listeningSection } = useExamEditorStore(
        (state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
    );

    return (
        <>
            {generating && (
                (generating === "passage" && <GenLoader module="reading" />) ||
                (generating === "listeningScript" && <GenLoader module="listening" />)
            )}
            {(readingSection || listeningSection) && (
                <div className="space-y-4 mb-4">
                    {readingSection && <ReadingContext sectionId={sectionId} module="level" />}
                    {listeningSection && <ListeningContext sectionId={sectionId} listeningSection={listeningSection} module="level" level={true}/>}
                </div>
            )}
        </>
    );
};

export default LevelContext;