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

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

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

    const isOffline: boolean = isCurrentlyOffline();

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

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

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

    async function syncToServer(): Promise<void> {
        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" onClick={(e) => e.stopPropagation()}>
                <Loader2 className="w-4 h-4 text-primary animate-spin"/>
            </div>
        );
    }

    return (
        <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
            {currentStatus === 'synced' && (
                <Cloud className="w-4 h-4 text-gray-light" title={t("seriesCard.synced")}/>
            )}

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