import { useCallback, useEffect, useState } from "react";
import useExamEditorStore from "@/stores/examEditor";
import { ModuleState } from "@/stores/examEditor/types";
import { SpeakingExercise, InteractiveSpeakingExercise } from "@/interfaces/exam";
import useSectionEdit from "../../Hooks/useSectionEdit";
import Header from "../../Shared/Header";
import GenLoader from "../Shared/GenLoader";
import { Card, CardContent } from "@/components/ui/card";
import AutoExpandingTextArea from "@/components/Low/AutoExpandingTextarea";
import Speaking2 from "./Speaking2";
import InteractiveSpeaking from "./InteractiveSpeaking";
import Speaking1 from "./Speaking1";

interface Props {
    sectionId: number;
    exercise: SpeakingExercise | InteractiveSpeakingExercise;
}

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

    return (
        <>
            <div className="mx-auto p-3 space-y-6">
                <div className="p-4">
                    <div className="flex flex-col space-y-6">
                        {sectionId === 1 && <Speaking1 sectionId={sectionId} exercise={state as InteractiveSpeakingExercise} />}
                        {sectionId === 2 && <Speaking2 sectionId={sectionId} exercise={state as SpeakingExercise} />}
                        {sectionId === 3 && <InteractiveSpeaking sectionId={sectionId} exercise={state as InteractiveSpeakingExercise} />}
                    </div>
                </div>
            </div>
        </>
    );
};

export default Speaking;