ERitors-Scribe-Desktop/components/SyncBook.tsx

import {Cloud, CloudDownload, CloudUpload, Loader2} from "lucide-react";
import {useTranslations} from "@/lib/i18n";
import {useState, useEffect, useContext} from "react";
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
import {SyncType} from "@/context/BooksSyncContext";
import useSyncBooks from "@/hooks/useSyncBooks";
import IconButton from "@/components/ui/IconButton";

interface SyncBookProps {
    bookId: string;
    status: SyncType;
}

export default function SyncBook({bookId, status}: SyncBookProps) {
    const t = useTranslations();
    const {isCurrentlyOffline} = useContext<OfflineContextType>(OfflineContext);
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const [currentStatus, setCurrentStatus] = useState<SyncType>(status);
    const {upload: hookUpload, download: hookDownload, syncFromServer: hookSyncFromServer, syncToServer: hookSyncToServer} = useSyncBooks();

    useEffect((): void => {
        setCurrentStatus(status);
    }, [status]);

    const isOffline: boolean = isCurrentlyOffline();

    async function upload(): Promise<void> {
        if (isOffline) return;
        setIsLoading(true);
        const success: boolean = await hookUpload(bookId);
        if (success) setCurrentStatus('synced');
        setIsLoading(false);
    }

    async function download(): Promise<void> {
        if (isOffline) return;
        setIsLoading(true);
        const success = await hookDownload(bookId);
        if (success) setCurrentStatus('synced');
        setIsLoading(false);
    }

    async function syncFromServer(): Promise<void> {
        if (isOffline) return;
        setIsLoading(true);
        const success = await hookSyncFromServer(bookId);
        if (success) setCurrentStatus('synced');
        setIsLoading(false);
    }

    async function syncToServer(): Promise<void> {
        if (isOffline) return;
        setIsLoading(true);
        const success = await hookSyncToServer(bookId);
        if (success) setCurrentStatus('synced');
        setIsLoading(false);
    }

    if (isLoading) {
        return (
            <div className="flex items-center gap-2">
                <Loader2 className="w-4 h-4 text-primary animate-spin"/>
            </div>
        );
    }

    return (
        <div className="flex items-center gap-2">
            {currentStatus === 'synced' && (
                <IconButton icon={Cloud} variant="ghost" tooltip={t("bookCard.synced")} disabled/>
            )}

            {currentStatus === 'local-only' && (
                <IconButton
                    icon={CloudUpload}
                    variant={isOffline ? 'ghost' : 'primary'}
                    size="md"
                    onClick={upload}
                    disabled={isOffline}
                    tooltip={t("bookCard.localOnly")}
                />
            )}
            {currentStatus === 'server-only' && (
                <IconButton
                    icon={CloudDownload}
                    variant={isOffline ? 'ghost' : 'primary'}
                    size="md"
                    onClick={download}
                    disabled={isOffline}
                    tooltip={t("bookCard.serverOnly")}
                />
            )}
            {currentStatus === 'to-sync-from-server' && (
                <IconButton
                    icon={CloudDownload}
                    variant={isOffline ? 'ghost' : 'primary'}
                    size="md"
                    onClick={syncFromServer}
                    disabled={isOffline}
                    tooltip={t("bookCard.toSyncFromServer")}
                />
            )}
            {currentStatus === 'to-sync-to-server' && (
                <IconButton
                    icon={CloudUpload}
                    variant={isOffline ? 'ghost' : 'primary'}
                    size="md"
                    onClick={syncToServer}
                    disabled={isOffline}
                    tooltip={t("bookCard.toSyncToServer")}
                />
            )}
        </div>
    );
}