ERitors-Scribe-Desktop/components/book/settings/story/StorySetting.tsx

'use client'

import {createContext, forwardRef, useContext, useEffect, useImperativeHandle, useState} from 'react';
import {BookContext} from '@/context/BookContext';
import {SessionContext} from '@/context/SessionContext';
import {AlertContext} from '@/context/AlertContext';
import System from '@/lib/models/System';
import {Act as ActType, Issue} from '@/lib/models/Book';
import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
import MainChapter from "@/components/book/settings/story/MainChapter";
import Issues from "@/components/book/settings/story/Issue";
import Act from "@/components/book/settings/story/Act";
import {useTranslations} from "next-intl";
import {LangContext, LangContextProps} from "@/context/LangContext";
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";

export const StoryContext = createContext<{
    acts: ActType[];
    setActs: React.Dispatch<React.SetStateAction<ActType[]>>;
    mainChapters: ChapterListProps[];
    setMainChapters: React.Dispatch<React.SetStateAction<ChapterListProps[]>>;
    issues: Issue[];
    setIssues: React.Dispatch<React.SetStateAction<Issue[]>>;
}>({
    acts: [],
    setActs: (): void => {
    },
    mainChapters: [],
    setMainChapters: (): void => {
    },
    issues: [],
    setIssues: (): void => {
    },
});

interface StoryFetchData {
    mainChapter: ChapterListProps[];
    acts: ActType[];
    issues: Issue[];
}

export function Story(props: any, ref: any) {
    const t = useTranslations();
    const {lang} = useContext<LangContextProps>(LangContext);
    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
    const {book} = useContext(BookContext);
    const bookId: string = book?.bookId ? book.bookId.toString() : '';
    const {session} = useContext(SessionContext);
    const userToken: string = session.accessToken;
    const {errorMessage, successMessage} = useContext(AlertContext);
    
    const [acts, setActs] = useState<ActType[]>([]);
    const [issues, setIssues] = useState<Issue[]>([]);
    const [mainChapters, setMainChapters] = useState<ChapterListProps[]>([]);
    const [isLoading, setIsLoading] = useState<boolean>(true);
    
    useImperativeHandle(ref, function () {
        return {
            handleSave: handleSave
        };
    });
    
    useEffect((): void => {
        getStoryData().then();
    }, [userToken]);
    
    useEffect((): void => {
        cleanupDeletedChapters();
    }, [mainChapters]);
    
    async function getStoryData(): Promise<void> {
        try {
            let response: StoryFetchData;
            if (isCurrentlyOffline()) {
                response = await window.electron.invoke<StoryFetchData>('db:book:story:get', {bookid: bookId});
            } else {
                response = await System.authGetQueryToServer<StoryFetchData>(`book/story`, userToken, lang, {
                    bookid: bookId,
                });
            }
            if (response) {
                setActs(response.acts);
                setMainChapters(response.mainChapter);
                setIssues(response.issues);
                setIsLoading(false);
            }
        } catch (e: unknown) {
            setIsLoading(false);
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t("story.errorUnknownFetch"));
            }
        }
    }
    
    function cleanupDeletedChapters(): void {
        const existingChapterIds: string[] = mainChapters.map(ch => ch.chapterId);
        
        const updatedActs = acts.map((act: ActType) => {
            const filteredChapters: ActChapter[] = act.chapters?.filter((chapter: ActChapter): boolean =>
                existingChapterIds.includes(chapter.chapterId)) || [];
            const updatedIncidents = act.incidents?.map(incident => {
                return {
                    ...incident,
                    chapters: incident.chapters?.filter(chapter =>
                        existingChapterIds.includes(chapter.chapterId)) || []
                };
            }) || [];
            const updatedPlotPoints = act.plotPoints?.map(plotPoint => {
                return {
                    ...plotPoint,
                    chapters: plotPoint.chapters?.filter(chapter =>
                        existingChapterIds.includes(chapter.chapterId)) || []
                };
            }) || [];
            return {
                ...act,
                chapters: filteredChapters,
                incidents: updatedIncidents,
                plotPoints: updatedPlotPoints,
            };
        });
        setActs(updatedActs);
    }
    
    async function handleSave(): Promise<void> {
        try {
            let response: boolean;
            const storyData = {
                bookId,
                acts,
                mainChapters,
                issues,
            };
            if (isCurrentlyOffline()) {
                response = await window.electron.invoke<boolean>('db:book:story:update', storyData);
            } else {
                response = await System.authPostToServer<boolean>('book/story', storyData, userToken, lang);
            }
            if (!response) {
                errorMessage(t("story.errorSave"))
            }
            successMessage(t("story.successSave"));
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t("story.errorUnknownSave"));
            }
        }
    }
    
    return (
        <StoryContext.Provider
            value={{
                acts,
                setActs,
                mainChapters,
                setMainChapters,
                issues,
                setIssues,
            }}>
            <div className="flex flex-col h-full">
                <div className="flex-grow overflow-auto py-4">
                    <div className="space-y-6 px-4">
                        <MainChapter chapters={mainChapters} setChapters={setMainChapters}/>
                        <div className="space-y-4">
                            <Act acts={acts} setActs={setActs} mainChapters={mainChapters}/>
                        </div>
                        <Issues issues={issues} setIssues={setIssues}/>
                    </div>
                </div>
            </div>
        </StoryContext.Provider>
    );
}

export default forwardRef(Story);