encoach_ui_odoo19/src/components/ExamEditor/SectionRenderer/SectionExercises/index.tsx

import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
import SortableSection from "../../Shared/SortableSection";
import getReadingQuestions from '../SectionExercises/reading';
import { Exercise, LevelPart, ReadingPart, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
import { ReadingExercise } from "./types";
import Dropdown from "@/components/Dropdown";
import useExamEditorStore from "@/stores/examEditor";
import Writing from "../../Exercises/Writing";
import Speaking from "../../Exercises/Speaking";
import { ReactNode, useEffect, useState } from "react";
import {
    DndContext,
    PointerSensor,
    useSensor,
    useSensors,
    DragEndEvent,
    closestCenter,
} from '@dnd-kit/core';
import GenLoader from "../../Exercises/Shared/GenLoader";
import { ExamPart } from "@/stores/examEditor/types";
import getListeningItems from "./listening";
import getLevelQuestionItems from "./level";


export interface Props {
    sectionId: number;
}

const SectionExercises: React.FC<{ sectionId: number; }> = ({ sectionId }) => {
    const { currentModule, dispatch } = useExamEditorStore();
    const { sections, expandedSections } = useExamEditorStore(
        (state) => state.modules[currentModule]
    );

    const { genResult, generating, state } = useExamEditorStore(
        (state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
    );


    useEffect(() => {
        if (genResult !== undefined && generating === "exercises") {
            const newExercises = genResult[0].exercises;
            dispatch({
                type: "UPDATE_SECTION_STATE", payload: {
                    sectionId, update: {
                        exercises: [...(state as ExamPart).exercises, ...newExercises]
                    }
                }
            })
            dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "genResult", value: undefined } })
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [genResult, dispatch, sectionId, currentModule]);

    const currentSection = sections.find((s) => s.sectionId === sectionId)!;

    const sensors = useSensors(
        useSensor(PointerSensor),
    );

    const questionItems = () => {
        let ids, items;
        switch (currentModule) {
            case "reading":
                items = getReadingQuestions((currentSection.state as ReadingPart).exercises as ReadingExercise[], sectionId);
                ids = items.map(q => q.id.toString());
                break;
            case "listening":
                items = getListeningItems((currentSection.state as ReadingPart).exercises as ReadingExercise[], sectionId);
                ids = items.map(q => q?.id.toString());
                break;
            case "level":
                items = getLevelQuestionItems((currentSection.state as LevelPart).exercises as Exercise[], sectionId);
                ids = items.map(q => q.id.toString());
                break;
        }

        return { ids, items }
    }

    const questions = questionItems();

    const background = (component: ReactNode) => {
        return (
            <div className="p-8 shadow-inner border border-gray-200 bg-gray-50 rounded-xl">
                {component}
            </div>
        );
    }

    if (currentModule == "writing") return background(<Writing sectionId={sectionId} exercise={currentSection.state as WritingExercise} />);
    if (currentModule == "speaking") return background(<Speaking sectionId={sectionId} exercise={currentSection.state as SpeakingExercise} />);

    return (
        <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragEnd={(e) => dispatch({ type: "REORDER_EXERCISES", payload: { event: e, sectionId } })}
        >
            {(currentModule === "level" && questions.ids?.length === 0) ? (
                background(<span className="flex justify-center">Generated exercises will appear here!</span>)
            ) : (
                expandedSections.includes(sectionId) &&
                questions.items &&
                questions.items.length > 0 &&
                questions.ids &&
                questions.ids.length > 0 && (
                    <div className="mt-4 p-6 rounded-xl shadow-inner border bg-gray-50">
                        <SortableContext
                            items={questions.ids}
                            strategy={verticalListSortingStrategy}
                        >
                            {questions.items.map(item => (
                                <SortableSection key={item.id.toString()} id={item.id.toString()}>
                                    <Dropdown
                                        className={`w-full text-left p-4 mb-2 bg-gradient-to-r from-ielts-${currentModule}/60 to-ielts-${currentModule} text-white rounded-lg shadow-lg transition-transform transform hover:scale-102`}
                                        customTitle={item.label}
                                        contentWrapperClassName="rounded-xl"
                                    >
                                        <div className="p-4 shadow-inner border border-gray-200 bg-gray-50 rounded-xl">
                                            {item.content}
                                        </div>
                                    </Dropdown>
                                </SortableSection>
                            ))}
                        </SortableContext>
                    </div>
                )
            )}

            {generating === "exercises" && <GenLoader module={currentModule} className="mt-4" />}
        </DndContext >
    );
}

export default SectionExercises;