ERitors-Scribe-Desktop/components/rightbar/ComposerRightBar.tsx

import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faFeather, faGlobe, faInfoCircle, faMapMarkerAlt, faUsers} from "@fortawesome/free-solid-svg-icons";
import {RefObject, useContext, useEffect, useRef, useState} from "react";
import {BookContext} from "@/context/BookContext";
import {PanelComponent} from "@/lib/models/Editor";
import PanelHeader from "@/components/PanelHeader";
import AboutEditors from "@/components/rightbar/AboutERitors";
import {faDiscord, faFacebook} from "@fortawesome/free-brands-svg-icons";
import WorldSetting from "@/components/book/settings/world/WorldSetting";
import LocationComponent from "@/components/book/settings/locations/LocationComponent";
import CharacterComponent from "@/components/book/settings/characters/CharacterComponent";
import QuillSense from "@/components/quillsense/QuillSenseComponent";
import {useTranslations} from "next-intl";
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";

export default function ComposerRightBar() {
    const {book} = useContext(BookContext);
    
    const t = useTranslations();
    
    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext)
    
    const [panelHidden, setPanelHidden] = useState<boolean>(false);
    const [currentPanel, setCurrentPanel] = useState<PanelComponent | undefined>()
    
    const [showAbout, setShowAbout] = useState<boolean>(false);
    
    const worldRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
    const locationRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
    const characterRef: RefObject<{ handleSave: () => Promise<void> } | null> = useRef<{ handleSave: () => Promise<void> }>(null);
    
    async function handleSaveClick(): Promise<void> {
        switch (currentPanel?.id) {
            case 2:
                worldRef.current?.handleSave();
                break;
            case 3:
                locationRef.current?.handleSave();
                break;
            case 4:
                characterRef.current?.handleSave();
                break;
            default:
                break;
        }
    }
    
    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]);
    
    const editorComponents: PanelComponent[] = [
        {
            id: 1,
            title: t("composerRightBar.editorComponents.quillSense.title"),
            description: t("composerRightBar.editorComponents.quillSense.description"),
            badge: t("composerRightBar.editorComponents.quillSense.badge"),
            icon: faFeather
        },
        {
            id: 2,
            title: t("composerRightBar.editorComponents.worlds.title"),
            description: t("composerRightBar.editorComponents.worlds.description"),
            badge: t("composerRightBar.editorComponents.worlds.badge"),
            icon: faGlobe
        },
        {
            id: 3,
            title: t("composerRightBar.editorComponents.locations.title"),
            description: t("composerRightBar.editorComponents.locations.description"),
            badge: t("composerRightBar.editorComponents.locations.badge"),
            icon: faMapMarkerAlt
        },
        {
            id: 4,
            title: t("composerRightBar.editorComponents.characters.title"),
            description: t("composerRightBar.editorComponents.characters.description"),
            badge: t("composerRightBar.editorComponents.characters.badge"),
            icon: faUsers
        },
        /*{
            id: 5,
            title: t("composerRightBar.editorComponents.items.title"),
            description: t("composerRightBar.editorComponents.items.description"),
            badge: t("composerRightBar.editorComponents.items.badge"),
            icon: faCube,
        }*/
    ]
    
    const homeComponents: PanelComponent[] = [
        {
            id: 1,
            title: t("composerRightBar.homeComponents.about.title"),
            description: t("composerRightBar.homeComponents.about.description"),
            badge: t("composerRightBar.homeComponents.about.badge"),
            icon: faInfoCircle,
            action: () => setShowAbout(true)
        },
        {
            id: 2,
            title: t("composerRightBar.homeComponents.facebook.title"),
            description: t("composerRightBar.homeComponents.facebook.description"),
            badge: t("composerRightBar.homeComponents.facebook.badge"),
            icon: faFacebook,
            action: ():Promise<void> => window.electron.openExternal('https://www.facebook.com/profile.php?id=61562628720878')
        },
        {
            id: 3,
            title: t("composerRightBar.homeComponents.discord.title"),
            description: t("composerRightBar.homeComponents.discord.description"),
            badge: t("composerRightBar.homeComponents.discord.badge"),
            icon: faDiscord,
            action: () => window.electron.openExternal('https://discord.gg/CHXRPvmaXm')
        }
    ]
    
    function disabled(componentId: number): boolean {
        switch (componentId) {
            case 1:
                return book === null;
            default:
                return book === null;
        }
    }
    
    return (
        <div id="right-panel-container" className="flex transition-all duration-300">
            {panelHidden && (
                <div id="right-panel"
                     className="bg-tertiary/95 backdrop-blur-sm border-l border-secondary/50 min-w-[450px] max-w-[450px] h-full transition-all duration-300 overflow-hidden shadow-2xl">
                    <div className="flex flex-col h-full">
                        <PanelHeader title={currentPanel?.title ?? ''}
                                     description={currentPanel?.description ?? ''}
                                     badge={currentPanel?.badge ?? ''}
                                     icon={currentPanel?.icon}
                                     secondActionCallback={currentPanel?.id === 2 || currentPanel?.id === 3 || currentPanel?.id === 4 ? handleSaveClick : undefined}
                                     callBackAction={async () => setPanelHidden(!panelHidden)}
                        />
                        <div className="flex-grow overflow-auto">
                            {currentPanel?.id === 1 && (
                                <QuillSense/>
                            )}
                            {currentPanel?.id === 2 && (
                                <WorldSetting ref={worldRef}/>
                            )}
                            {currentPanel?.id === 3 && (
                                <LocationComponent ref={locationRef}/>
                            )}
                            {currentPanel?.id === 4 && (
                                <CharacterComponent ref={characterRef}/>
                            )}
                        </div>
                    </div>
                </div>
            )}
            <div className="bg-tertiary border-l border-secondary/50 p-3 flex flex-col space-y-3 shadow-xl">
                {book ? editorComponents
                    .filter((component: PanelComponent):boolean => {
                        return !((isCurrentlyOffline() || book?.localBook) && component.id === 1);
                    })
                    .map((component: PanelComponent) => (
                    <button
                        key={component.id}
                        disabled={disabled(component.id)}
                        onClick={() => {
                            togglePanel(component);
                            setCurrentPanel(component);
                        }}
                        className={`group relative p-3 rounded-xl transition-all duration-200 ${
                            disabled(component.id)
                                ? 'bg-secondary/10 text-muted cursor-not-allowed opacity-40'
                                : panelHidden && currentPanel?.id === component.id
                                    ? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
                                    : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'
                        }`}
                        title={component.title}
                    >
                        <FontAwesomeIcon icon={component.icon}
                                         className={'w-5 h-5 transition-transform duration-200 group-hover:scale-110'}/>
                        {panelHidden && currentPanel?.id === component.id && (
                            <div
                                className="absolute -left-1 top-1/2 -translate-y-1/2 w-1 h-8 bg-primary rounded-r-full"></div>
                        )}
                    </button>
                )) : homeComponents.map((component: PanelComponent) => (
                    <button
                        key={component.id}
                        onClick={component.action ?? (() => {
                        })}
                        className={`group relative p-3 rounded-xl transition-all duration-200 ${panelHidden && currentPanel?.id === component.id
                            ? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105'
                            : 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-md hover:scale-105'}`}
                        title={component.title}
                    >
                        <FontAwesomeIcon icon={component.icon}
                                         className={'w-5 h-5 transition-transform duration-200 group-hover:scale-110'}/>
                    </button>
                ))}
            </div>
            {
                showAbout && <AboutEditors onClose={() => setShowAbout(false)}/>
            }
        </div>
    )
}