encoach_frontend/src/components/ExamEditor/Exercises/Writing/index.tsx

import { useCallback, useEffect, useState } from "react";
import useExamEditorStore from "@/stores/examEditor";
import ExamEditorStore, { ModuleState } from "@/stores/examEditor/types";
import AutoExpandingTextArea from "@/components/Low/AutoExpandingTextarea";
import { LevelPart, WritingExercise } from "@/interfaces/exam";
import Header from "../../Shared/Header";
import Alert, { AlertItem } from "../Shared/Alert";
import clsx from "clsx";
import useSectionEdit from "../../Hooks/useSectionEdit";
import GenLoader from "../Shared/GenLoader";
import setEditingAlert from "../Shared/setEditingAlert";
import { Module } from "@/interfaces";

interface Props {
    sectionId: number;
    exercise: WritingExercise;
    module: Module;
    index?: number;
}

const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
    const { currentModule, dispatch } = useExamEditorStore();
    const { generating, genResult, state } = useExamEditorStore(
        (state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
    );

    const [local, setLocal] = useState(exercise);
    const [prompt, setPrompt] = useState(exercise.prompt);
    const [loading, setLoading] = useState(generating && generating == "exercises");
    const [alerts, setAlerts] = useState<AlertItem[]>([]);

    const level = module === "level";

    const { editing, handleSave, handleDiscard, handleDelete, handlePractice, handleEdit, setEditing } = useSectionEdit({
        sectionId,
        onSave: () => {
            const newExercise = { ...local } as WritingExercise;
            newExercise.prompt = prompt;
            setAlerts([]);
            setEditing(false);
            if (!level) {
                dispatch({ type: "UPDATE_SECTION_STATE", payload: { sectionId: sectionId, update: newExercise, module } });
            }
            if (genResult) {
                dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "genResult", value: undefined } })
            }
        },
        onDiscard: () => {
            setEditing(false);
            setLocal(exercise);
            setPrompt(exercise.prompt);
        },
        onDelete: () => {
            if (level) {
                dispatch({
                    type: "UPDATE_SECTION_STATE", payload: {
                        sectionId: sectionId,
                        update: {
                            exercises: (state as LevelPart).exercises.filter((_, i) => i !== index)
                        },
                        module
                    }
                });
            }
        },
        onPractice: () => {
            const newState = { 
                ...state, 
                isPractice: !local.isPractice
            };
            dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: newState, module: currentModule } });
        }
    });

    useEffect(() => {
        const loading = generating && generating == "writing";
        setLoading(loading);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [generating]);

    useEffect(() => {
        if (genResult) {
            setEditing(true);
            setPrompt(genResult.result[0].prompt);
            dispatch({ type: "UPDATE_SECTION_SINGLE_FIELD", payload: { sectionId, module: currentModule, field: "generating", value: undefined } })
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [genResult, dispatch, sectionId, setEditing, currentModule]);

    useEffect(() => {
        setEditingAlert(prompt !== local.prompt, setAlerts);
    }, [prompt, local.prompt]);

    return (
        <>
            <div className={clsx('relative', level ? "px-4 mt-2" : "pb-2")}>
                <Header
                    title={`${sectionId === 1 ? "Letter" : "Essay"} Instructions`}
                    description='Generate or edit the instructions for the task'
                    editing={editing}
                    handleSave={handleSave}
                    handleDelete={handleDelete}
                    handleEdit={handleEdit}
                    handleDiscard={handleDiscard}
                    handlePractice={handlePractice}
                    isEvaluationEnabled={!local.isPractice}
                    module={"writing"}
                />
                {alerts.length !== 0 && <Alert alerts={alerts} />}
            </div>
            <div className={clsx(level ? "mt-2 px-4" : "mt-4")}>
                {loading ?
                    <GenLoader module={currentModule} /> :
                    (
                        editing ? (
                            <div className="text-gray-600 p-4">
                                <AutoExpandingTextArea
                                    value={prompt}
                                    onChange={(text) => setPrompt(text)}
                                    placeholder="Instructions ..."
                                />
                            </div>
                        ) : (
                            <p className={
                                clsx("w-full px-7 py-8 border-2 bg-white rounded-3xl whitespace-pre-line",
                                    prompt === "" ? "text-gray-600/50" : "text-gray-600"
                                )
                            }>
                                {prompt === "" ? "Instructions ..." : prompt}
                            </p>
                        )
                    )}
            </div>
        </>
    );
};

export default Writing;