memowake-front/components/file-upload/autoUploadScreen.tsx

import { triggerManualUpload } from '@/lib/background-uploader/manual';
import { router } from 'expo-router';
import React, { useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import UploaderProgressBar from './upload-progress/progress-bar';

export default function AutoUploadScreen() {
    const [timeRange, setTimeRange] = useState('day');
    const [isLoading, setIsLoading] = useState(false);
    const [uploadProgress, setUploadProgress] = useState({
        totalCount: 0,
        uploadedCount: 0,
        currentFileUrl: '',
        uploadedSize: 0,
        totalSize: 0,
    });


    // 处理手动上传
    const handleManualUpload = async () => {
        try {
            setIsLoading(true);
            await triggerManualUpload(
                getDateRange(timeRange)[0],
                getDateRange(timeRange)[1],
                (progress) => {
                    setUploadProgress({
                        totalCount: progress.totalCount,
                        uploadedCount: progress.uploadedCount,
                        currentFileUrl: progress.currentAsset.uri,
                        uploadedSize: progress.uploadedBytes,
                        totalSize: progress.totalBytes,
                    });
                }
            );
        } catch (error) {
            console.error('Upload error:', error);
        } finally {
            setIsLoading(false);
        }
    };

    // 获取时间范围文本
    const getDateRangeText = (timeRange: string) => {
        switch (timeRange) {
            case 'day':
                return '最近一天';
            case 'week':
                return '最近一周';
            case 'month':
                return '最近一个月';
            case 'all':
                return '全部';
            default:
                return '';
        }
    };

    // 获取时间范围
    const getDateRange = (timeRange: string) => {
        const date = new Date();
        switch (timeRange) {
            case 'day':
                date.setDate(date.getDate() - 1);
                break;
            case 'week':
                date.setDate(date.getDate() - 7);
                break;
            case 'month':
                date.setMonth(date.getMonth() - 1);
                break;
            case 'all':
                date.setFullYear(date.getFullYear() - 1);
                break;
            default:
                break;
        }
        return [date, new Date()];
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>自动上传设置</Text>

            <View style={styles.buttonGroup}>
                <Text style={styles.sectionTitle}>选择时间范围:</Text>
                <View style={styles.buttonRow}>
                    <TouchableOpacity
                        style={[styles.timeButton, timeRange === 'day' && styles.activeButton]}
                        onPress={() => setTimeRange('day')}
                    >
                        <Text style={styles.buttonText}>一天</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.timeButton, timeRange === 'week' && styles.activeButton]}
                        onPress={() => setTimeRange('week')}
                    >
                        <Text style={styles.buttonText}>一周</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.timeButton, timeRange === 'month' && styles.activeButton]}
                        onPress={() => setTimeRange('month')}
                    >
                        <Text style={styles.buttonText}>一个月</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.timeButton, timeRange === 'all' && styles.activeButton]}
                        onPress={() => setTimeRange('all')}
                    >
                        <Text style={styles.buttonText}>全部</Text>
                    </TouchableOpacity>
                </View>
                <Text style={styles.dateRangeText}>
                    {getDateRangeText(timeRange)}
                </Text>
            </View>

            <View style={styles.uploadButtonContainer}>
                <TouchableOpacity
                    style={[styles.uploadButton, isLoading && styles.uploadButtonDisabled]}
                    onPress={handleManualUpload}
                    disabled={isLoading}
                >
                    <Text style={styles.uploadButtonText}>
                        {isLoading ? '上传中...' : '开始上传'}
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity
                    className='mt-2'
                    style={[styles.uploadButton]}
                    onPress={() => router.push('/debug')}
                >
                    <Text style={styles.uploadButtonText}>
                        进入db调试页面
                    </Text>
                </TouchableOpacity>
            </View>



            {
                // isLoading && 
                (
                    <UploaderProgressBar
                        imageUrl={uploadProgress.currentFileUrl}
                        uploadedCount={uploadProgress.uploadedCount}
                        totalCount={uploadProgress.totalCount}
                    />
                )}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20,
        backgroundColor: '#fff',
    },
    title: {
        fontSize: 20,
        fontWeight: 'bold',
        marginBottom: 20,
        textAlign: 'center',
    },
    buttonGroup: {
        marginBottom: 20,
    },
    sectionTitle: {
        fontSize: 16,
        marginBottom: 10,
        color: '#333',
    },
    buttonRow: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginBottom: 10,
        gap: 10,
    },
    timeButton: {
        paddingVertical: 8,
        paddingHorizontal: 15,
        borderRadius: 20,
        backgroundColor: '#f0f0f0',
        borderWidth: 1,
        borderColor: '#ddd',
    },
    activeButton: {
        backgroundColor: '#007AFF',
        borderColor: '#007AFF',
    },
    buttonText: {
        color: '#333',
        textAlign: 'center',
    },
    dateRangeText: {
        fontSize: 14,
        color: '#666',
        marginTop: 8,
    },
    uploadButtonContainer: {
        marginTop: 20,
    },
    uploadButton: {
        backgroundColor: '#007AFF',
        padding: 15,
        borderRadius: 8,
        alignItems: 'center',
    },
    uploadButtonDisabled: {
        backgroundColor: '#84c1ff',
    },
    uploadButtonText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: '600',
    },
    statusContainer: {
        marginTop: 30,
        padding: 15,
        backgroundColor: '#f8f8f8',
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#eee',
    },
    statusText: {
        fontSize: 15,
        marginBottom: 5,
        color: '#333',
    },
    hintText: {
        fontSize: 13,
        color: '#666',
    },
    loadingContainer: {
        marginTop: 20,
        alignItems: 'center',
    },
    loadingText: {
        marginTop: 10,
        color: '#666',
    },
});