ERitors-Scribe-Desktop/components/quillsense/QuillSenseComponent.tsx

import React, {useContext, useState} from 'react';
import {ArrowLeftRight, Languages, Lightbulb, LucideIcon, Menu, MessageSquare, SpellCheck} from 'lucide-react';
import IconContainer from '@/components/ui/IconContainer';
import IconButton from '@/components/ui/IconButton';
import {QSView} from "@/lib/types/quillsense";
import {getSubLevel, isBringYourKeys, isOpenAIEnabled} from "@/lib/utils/quillsense";

import QuillList from "@/components/quillsense/modes/QuillList";
import QuillConversation from "./modes/QuillConversation";
import Dictionary from "@/components/quillsense/modes/Dictionary";
import Synonyms from "@/components/quillsense/modes/Synonyms";
import InspireMe from "@/components/quillsense/modes/InspireMe";
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import {useTranslations} from '@/lib/i18n';
import Conjugator from "@/components/quillsense/modes/Conjugator";

interface QSOption {
    view: QSView;
    icon: LucideIcon;
}

export default function QuillSenseComponent(): React.JSX.Element {
    const [view, setView] = useState<QSView>('chat');
    const t = useTranslations();
    const [selectedConversation, setSelectedConversation] = useState<string>('');
    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);

    const isBYOK: boolean = isBringYourKeys(session);
    const subLevel: number = getSubLevel(session)

    const isGPTEnabled: boolean = isOpenAIEnabled(session);
    const isSubTierTwo: boolean = getSubLevel(session) >= 2;
    const hasAccess: boolean = isGPTEnabled || isSubTierTwo;

    const qsOptions: QSOption[] = [
        {view: 'dictionary', icon: SpellCheck},
        {view: 'conjugator', icon: Languages},
        {view: 'synonyms', icon: ArrowLeftRight},
        {view: 'inspiration', icon: Lightbulb},
        {view: 'chat', icon: MessageSquare},
    ];
    
    function handleSetView(view: QSView): void {
        setView(view);
    }
    
    function handleSelectConversation(conversationId: string): void {
        setSelectedConversation(conversationId);
        setView('chat');
    }
    
    return (
        <div className="flex flex-col h-full w-full bg-darkest-background overflow-hidden">
            <div
                className="px-3 py-3 flex items-center justify-between bg-darkest-background">
                <div className="flex items-center">
                    <div className="mr-3">
                        <IconButton icon={Menu} variant="ghost" shape="square"
                                    onClick={(): void => handleSetView(view === 'chat' ? 'list' : 'chat')}
                                    tooltip={t('quillSense.toggleList')}/>
                    </div>
                </div>
                <div className="flex items-center gap-1">
                    {
                        qsOptions.map((option: QSOption): React.JSX.Element => (
                            <IconButton
                                key={option.view}
                                icon={option.icon}
                                variant={view === option.view ? 'primary' : 'ghost'}
                                shape="square"
                                disabled={!isBYOK && subLevel < 2 && option.view !== 'chat'}
                                onClick={(): void => handleSetView(option.view)}
                                tooltip={t(`quillSense.options.${option.view}`)}
                            />
                        ))
                    }
                </div>
            </div>
            {
                isBYOK || subLevel >= 2 ? (
                    <>
                        {view === 'list' ? (
                            <QuillList handleSelectConversation={handleSelectConversation}/>
                        ) : view === 'chat' ? (
                            <QuillConversation
                                disabled={!isBYOK && subLevel < 2}
                                selectedConversation={selectedConversation}
                                setSelectConversation={setSelectedConversation}
                            />
                        ) : view === 'dictionary' ? (
                            <Dictionary hasKey={hasAccess}/>
                        ) : view === 'synonyms' ? (
                            <Synonyms hasKey={hasAccess}/>
                        ) : view === 'conjugator' ? (
                            <Conjugator hasKey={hasAccess}/>
                        ) : view === 'inspiration' ? (
                            <InspireMe hasKey={hasAccess}/>
                        ) : (
                            <></>
                        )}
                    </>
                ) : (
                    <div className="flex flex-col items-center justify-center h-full text-text-primary p-8">
                        <IconContainer icon={Lightbulb} size="lg" shape="rounded"/>
                        <p className="text-xl font-['ADLaM_Display'] text-center mb-3">{t('quillSense.needSubscription')}</p>
                        <p className="text-lg text-muted text-center max-w-md leading-relaxed">{t('quillSense.subscriptionDescription')}</p>
                    </div>
                )
            }
        </div>
    );
}