ERitors-Scribe-Desktop/components/SyncSeries.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, useEffect } from "react";
import OfflineContext, { OfflineContextType } from "@/context/OfflineContext";
import { SeriesSyncType } from "@/context/SeriesSyncContext";
import useSyncSeries from "@/hooks/useSyncSeries";

interface SyncSeriesProps {
    seriesId: string;
    status: SeriesSyncType;
}

export default function SyncSeries({ seriesId, status }: SyncSeriesProps) {
    const t = useTranslations();
    const { isCurrentlyOffline } = useContext<OfflineContextType>(OfflineContext);
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const [currentStatus, setCurrentStatus] = useState<SeriesSyncType>(status);
    const { upload: hookUpload, download: hookDownload, syncFromServer: hookSyncFromServer, syncToServer: hookSyncToServer } = useSyncSeries();

    // Synchroniser le state local avec le prop quand il change (ex: après sync auto)
    useEffect(() => {
        setCurrentStatus(status);
    }, [status]);

    const isOffline: boolean = isCurrentlyOffline();

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

    async function download(event: React.MouseEvent): Promise<void> {
        event.stopPropagation();
        if (isOffline) return;
        setIsLoading(true);
        const success = await hookDownload(seriesId);
        if (success) setCurrentStatus('synced');
        setIsLoading(false);
    }

    async function syncFromServer(event: React.MouseEvent): Promise<void> {
        event.stopPropagation();
        if (isOffline) return;
        setIsLoading(true);
        const success = await hookSyncFromServer(seriesId);
        if (success) setCurrentStatus('synced');
        setIsLoading(false);
    }

    async function syncToServer(event: React.MouseEvent): Promise<void> {
        event.stopPropagation();
        if (isOffline || isLoading) return;
        setIsLoading(true);
        const success = await hookSyncToServer(seriesId);
        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("seriesCard.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("seriesCard.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("seriesCard.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("seriesCard.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("seriesCard.toSyncToServer")}
                    type="button"
                    disabled={isOffline}
                >
                    <FontAwesomeIcon icon={faCloudArrowUp} className="w-4 h-4"/>
                </button>
            )}
        </div>
    );
}