import { FileUploadItem } from "@/types/upload";
import { Image, StyleSheet, Text, View } from "react-native";
import * as Progress from 'react-native-progress';
import { ThemedText } from "../ThemedText";

const UploadPreview = ({
    items,
    onRetry
}: {
    items: FileUploadItem[];
    onRetry?: (id: string) => void;
}) => {
    return (
        <View style={styles.previewContainer}>
            {items.map((item) => (
                <View key={item.id} style={[
                    styles.previewItem,
                    item.status === 'error' && styles.errorItem
                ]}>
                    <Image
                        source={{ uri: item.thumbnail }}
                        style={styles.previewImage}
                        resizeMode="cover"
                    />
                    <View style={styles.progressContainer}>
                        <Text style={styles.fileName} numberOfLines={1}>
                            {item.name}
                        </Text>
                        <View style={styles.statusContainer}>
                            {item.status === 'uploading' && (
                                <Progress.Bar
                                    progress={item.progress / 100}
                                    width={200}
                                    color={'#007AFF'}
                                />
                            )}
                            {item.status === 'success' && (
                                <ThemedText style={styles.successText}>✓ 上传成功</ThemedText>
                            )}
                        </View>
                        {item.error && (
                            <ThemedText style={styles.errorText} numberOfLines={2}>
                                {item.error}
                            </ThemedText>
                        )}
                    </View>
                </View>
            ))}
        </View>
    );
};

// 添加样式
const styles = StyleSheet.create({
    previewContainer: {
        marginTop: 16,
    },
    previewItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 12,
        padding: 12,
        backgroundColor: '#f8f9fa',
        borderRadius: 8,
        borderWidth: 1,
        borderColor: '#e9ecef',
    },
    errorItem: {
        backgroundColor: '#fff5f5',
        borderColor: '#ffd6d6',
    },
    previewImage: {
        width: 50,
        height: 50,
        borderRadius: 4,
        marginRight: 12,
        backgroundColor: '#e9ecef',
    },
    progressContainer: {
        flex: 1,
    },
    statusContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 4,
    },
    fileName: {
        fontSize: 14,
        fontWeight: '500',
        color: '#212529',
    },
    retryButton: {
        paddingHorizontal: 12,
        paddingVertical: 4,
        backgroundColor: '#ff3b30',
        borderRadius: 4,
        marginLeft: 8,
    },
    retryText: {
        color: 'white',
        fontSize: 12,
        fontWeight: '500',
    },
    errorText: {
        color: '#ff3b30',
        fontSize: 12,
        marginTop: 4,
    },
    successText: {
        color: '#34c759',
        fontSize: 12,
        fontWeight: '500',
    },
});


export default UploadPreview;