ERitors-Scribe-Desktop/components/leftbar/ScribeLeftBar.tsx

import {BookHeart, BookOpen, Feather, FileInput, Layers, X} from "lucide-react";
import React, {useContext, useEffect, useState} from "react";
import {BookContext, BookContextProps} from "@/context/BookContext";
import ScribeChapterComponent from "@/components/leftbar/ScribeChapterComponent";
import SectionHeader from "@/components/ui/SectionHeader";
import IconButton from "@/components/ui/IconButton";
import {PanelComponent} from "@/lib/types/editor";
import AddNewBookForm from "@/components/book/AddNewBookForm";
import AddNewSeriesForm from "@/components/series/AddNewSeriesForm";
import ShortStoryGenerator from "@/components/ShortStoryGenerator";
import ImportBookForm from "@/components/book/ImportBookForm";
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import {useTranslations} from '@/lib/i18n';
import InsetPanel from "@/components/ui/InsetPanel";
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";

export default function ScribeLeftBar() {
    const {book}: BookContextProps = useContext<BookContextProps>(BookContext);
    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
    const {isCurrentlyOffline}: OfflineContextType = useContext<OfflineContextType>(OfflineContext);
    const t = useTranslations();

    const [panelHidden, setPanelHidden] = useState<boolean>(false);
    const [currentPanel, setCurrentPanel] = useState<PanelComponent>();
    const [showAddNewBook, setShowAddNewBook] = useState<boolean>(false);
    const [showAddNewSeries, setShowAddNewSeries] = useState<boolean>(false);
    const [showGenerateShortModal, setShowGenerateShortModal] = useState<boolean>(false)
    const [showImportBook, setShowImportBook] = useState<boolean>(false)

    const editorComponents: PanelComponent[] = [
        {
            id: 1,
            title: t("scribeLeftBar.editorComponents.structure.title"),
            description: t("scribeLeftBar.editorComponents.structure.description"),
            badge: t("scribeLeftBar.editorComponents.structure.badge"),
            icon: BookOpen
        }
    ]

    const homeComponents: PanelComponent[] = [
        {
            id: 1,
            title: t("scribeLeftBar.homeComponents.addBook.title"),
            description: t("scribeLeftBar.homeComponents.addBook.description"),
            badge: t("scribeLeftBar.homeComponents.addBook.badge"),
            icon: BookHeart
        }, {
            id: 2,
            title: t("scribeLeftBar.homeComponents.generateStory.title"),
            icon: Feather,
            badge: t("scribeLeftBar.homeComponents.generateStory.badge"),
            description: t("scribeLeftBar.homeComponents.generateStory.description")
        }, {
            id: 3,
            title: t("scribeLeftBar.homeComponents.addSeries.title"),
            icon: Layers,
            badge: t("scribeLeftBar.homeComponents.addSeries.badge"),
            description: t("scribeLeftBar.homeComponents.addSeries.description")
        }, {
            id: 4,
            title: t("scribeLeftBar.homeComponents.importBook.title"),
            icon: FileInput,
            badge: t("scribeLeftBar.homeComponents.importBook.badge"),
            description: t("scribeLeftBar.homeComponents.importBook.description")
        },
    ]

    function togglePanel(component: PanelComponent): void {
        if (panelHidden) {
            if (currentPanel?.id === component.id) {
                setPanelHidden(!panelHidden);
                return;
            }
        } else {
            setPanelHidden(true);
        }
    }
    
    useEffect((): void => {
        if (!book) {
            setCurrentPanel(undefined);
            setPanelHidden(false);
            return;
        }
    }, [book]);
    

    return (
        <div id="left-panel-container" data-guide={"left-panel-container"} className="flex transition-all duration-300">
            <div className="bg-tertiary p-1 flex flex-col space-y-2">
                {book ? editorComponents.map(component => (
                    <IconButton
                        key={component.id}
                        icon={component.icon}
                        variant="ghost"
                        shape="square"
                        tooltip={component.title}
                        selected={panelHidden && currentPanel?.id === component.id}
                        onClick={(): void => {
                            togglePanel(component);
                            setCurrentPanel(component);
                        }}
                    />
                )) : (
                    homeComponents.filter((component: PanelComponent): boolean => {
                        return !(isCurrentlyOffline() && component.id === 2);
                    }).map((component: PanelComponent) => (
                        <IconButton
                            key={component.id}
                            icon={component.icon}
                            variant="ghost"
                            shape="square"
                            tooltip={component.title}
                            selected={panelHidden && currentPanel?.id === component.id}
                            onClick={(): void => {
                                if (component.id === 1) setShowAddNewBook(true);
                                else if (component.id === 2) setShowGenerateShortModal(true);
                                else if (component.id === 3) setShowAddNewSeries(true);
                                else if (component.id === 4) setShowImportBook(true);
                            }}
                        />
                    ))
                )}
            </div>

            {panelHidden && (
                <div id="left-panel"
                     className="bg-tertiary h-full min-w-[320px] transition-all duration-300 flex flex-col">
                    <InsetPanel>
                        <div className="p-4">
                            <SectionHeader title={currentPanel?.title ?? ''}
                                           icon={currentPanel?.icon}
                                           actions={<IconButton icon={X} variant="ghost"
                                                                onClick={async (): Promise<void> => setPanelHidden(!panelHidden)}/>}/>
                        </div>
                        {currentPanel?.id === 1 && (
                            <ScribeChapterComponent/>
                        )}
                    </InsetPanel>
                </div>
            )}
            {
                showAddNewBook &&
                <AddNewBookForm setCloseForm={setShowAddNewBook}/>
            }
            {
                showAddNewSeries &&
                <AddNewSeriesForm setCloseForm={setShowAddNewSeries}/>
            }
            {
                showGenerateShortModal &&
                <ShortStoryGenerator onClose={() => setShowGenerateShortModal(false)}/>
            }
            {
                showImportBook &&
                <ImportBookForm setCloseForm={setShowImportBook}/>
            }
        </div>
    )
}