ERitors-Scribe-Desktop/components/SyncBook.tsx

import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faCloud, faCloudArrowDown, faCloudArrowUp, faSpinner} from "@fortawesome/free-solid-svg-icons";
import {useTranslations} from "next-intl";
import {useState, useContext} from "react";
import OfflineContext, {OfflineContextType} from "@/context/OfflineContext";
import {SyncType} from "@/context/BooksSyncContext";
import useSyncBooks from "@/hooks/useSyncBooks";

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();

    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">
                <span className="text-primary">
                    <FontAwesomeIcon icon={faSpinner} className="w-4 h-4 animate-spin"/>
                </span>
            </div>
        );
    }

    return (
        <div className="flex items-center gap-2">
            {currentStatus === 'synced' && (
                <span
                    className="text-gray-light"
                    title={t("bookCard.synced")}
                >
                    <FontAwesomeIcon icon={faCloud} className="w-4 h-4"/>
                </span>
            )}
            
            {currentStatus === 'local-only' && (
                <button
                    onClick={upload}
                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-gray hover:text-primary cursor-pointer'}`}
                    title={t("bookCard.localOnly")}
                    type="button"
                    disabled={isOffline}
                >
                    <FontAwesomeIcon icon={faCloudArrowUp} className="w-4 h-4"/>
                </button>
            )}
            {currentStatus === 'server-only' && (
                <button
                    onClick={download}
                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-gray hover:text-primary cursor-pointer'}`}
                    title={t("bookCard.serverOnly")}
                    type="button"
                    disabled={isOffline}
                >
                    <FontAwesomeIcon icon={faCloudArrowDown} className="w-4 h-4"/>
                </button>
            )}
            {currentStatus === 'to-sync-from-server' && (
                <button
                    onClick={syncFromServer}
                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-warning hover:text-primary cursor-pointer'}`}
                    title={t("bookCard.toSyncFromServer")}
                    type="button"
                    disabled={isOffline}
                >
                    <FontAwesomeIcon icon={faCloudArrowDown} className="w-4 h-4"/>
                </button>
            )}
            {currentStatus === 'to-sync-to-server' && (
                <button
                    onClick={syncToServer}
                    className={`transition-colors ${isOffline ? 'text-gray-dark cursor-not-allowed' : 'text-warning hover:text-primary cursor-pointer'}`}
                    title={t("bookCard.toSyncToServer")}
                    type="button"
                    disabled={isOffline}
                >
                    <FontAwesomeIcon icon={faCloudArrowUp} className="w-4 h-4"/>
                </button>
            )}
        </div>
    );
}