'use client';
import React, {useContext, useEffect, useRef} from 'react';
import {useParams} from '@/lib/navigation';
import {ChapterContext, ChapterContextProps} from '@/context/ChapterContext';
import {SessionContext, SessionContextProps} from '@/context/SessionContext';
import {LangContext, LangContextProps} from '@/context/LangContext';
import {AlertContext, AlertContextProps} from '@/context/AlertContext';
import {apiGet} from '@/lib/api/client';
import {isDesktop} from '@/lib/configs';
import * as tauri from '@/lib/tauri';
import OfflineContext, {OfflineContextType} from '@/context/OfflineContext';
import {BookContext, BookContextProps} from '@/context/BookContext';
import {ChapterProps} from '@/lib/types/chapter';
import {useTranslations} from '@/lib/i18n';
import TextEditor from '@/components/editor/TextEditor';

export default function ChapterPage() {
    const params: { bookId: string; chapterId: string } = useParams<{ bookId: string; chapterId: string }>();
    const {chapter, setChapter}: ChapterContextProps = useContext<ChapterContextProps>(ChapterContext);
    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
    const {lang}: LangContextProps = useContext<LangContextProps>(LangContext);
    const {errorMessage}: AlertContextProps = useContext<AlertContextProps>(AlertContext);
    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
    const t = useTranslations();
    const hasFetched = useRef<string>('');

    useEffect((): void => {
        if (!session.accessToken || !params.chapterId) return;
        if (chapter && chapter.chapterId === params.chapterId) {
            hasFetched.current = params.chapterId;
            return;
        }
        if (hasFetched.current === params.chapterId) return;
        hasFetched.current = params.chapterId;
        fetchChapter().then();
    }, [params.chapterId, session.accessToken, chapter]);

    async function fetchChapter(): Promise<void> {
        try {
            const isFirstLoad: boolean = !chapter;
            let response: ChapterProps | null;
            if (isDesktop && (isCurrentlyOffline() || book?.localBook)) {
                if (isFirstLoad) {
                    response = await tauri.getLastChapter(params.bookId);
                } else {
                    response = await tauri.getWholeChapter(params.chapterId, chapter!.chapterContent.version, params.bookId);
                }
            } else {
                const endpoint: string = isFirstLoad ? 'chapter/last-chapter' : 'chapter/whole';
                const queryParams: Record<string, string | number> = isFirstLoad
                    ? {bookid: params.bookId}
                    : {bookid: params.bookId, id: params.chapterId, version: chapter!.chapterContent.version};
                response = await apiGet<ChapterProps | null>(
                    endpoint, session.accessToken, lang, queryParams
                );
            }
            if (!response) {
                errorMessage(t('scribeChapterComponent.errorFetchChapter'));
                return;
            }
            setChapter(response);
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t('scribeChapterComponent.errorFetchChapter'));
            }
        }
    }

    if (!chapter || chapter.chapterId !== params.chapterId) {
        return null;
    }

    return <TextEditor/>;
}