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, state } = useExamEditorStore(
        (state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
    );

    const hasReadingContext =
        'text' in state &&
        state.text !== undefined &&
        typeof state.text === 'object' &&
        'content' in state.text &&
        state.text.content !== undefined &&
        state.text.content !== "";

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

export default LevelContext;