import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import * as Progress from 'react-native-progress';

// Helper to format bytes into a readable string (e.g., KB, MB)
const formatBytes = (bytes: number, decimals = 1) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
};

interface UploaderProgressBarProps {
    imageUrl: string;
    uploadedSize: number; // in bytes
    totalSize: number; // in bytes
    uploadedCount: number;
    totalCount: number;
}

const UploaderProgressBar: React.FC<UploaderProgressBarProps> = ({
    imageUrl,
    uploadedSize,
    totalSize,
    uploadedCount,
    totalCount,
}) => {
    const progress = totalSize > 0 ? uploadedSize / totalSize : 0;
    // The image shows 1.1M/6.3M, so we format the bytes
    const formattedUploadedSize = formatBytes(uploadedSize, 1).replace(' ', '');
    const formattedTotalSize = formatBytes(totalSize, 1).replace(' ', '');

    return (
        <View style={styles.container}>
            <View style={styles.imageContainer}>
                <Image source={{ uri: imageUrl }} style={styles.thumbnail} />
            </View>
            <View style={styles.progressSection}>
                <View style={styles.progressInfo}>
                    <Text style={styles.progressText}>{`${formattedUploadedSize}/${formattedTotalSize}`}</Text>
                    <Text style={styles.statusText}>Uploading...</Text>
                </View>
                <Progress.Bar
                    progress={progress}
                    width={null} // Fills the container
                    height={4}
                    color={'#4A4A4A'}
                    unfilledColor={'rgba(255, 255, 255, 0.5)'}
                    borderWidth={0}
                    style={styles.progressBar}
                />
            </View>
            <Text style={styles.countText}>{`${uploadedCount}/${totalCount}`}</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#F5B941', // From image
        borderRadius: 25,
        paddingHorizontal: 8,
        paddingVertical: 8,
        marginHorizontal: 15,
        height: 50,
    },
    imageContainer: {
        width: 40,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        // This container helps with the skewed frame effect
        transform: [{ rotate: '-5deg' }],
        marginRight: 8,
    },
    thumbnail: {
        width: 36,
        height: 36,
        borderRadius: 8,
        borderWidth: 2,
        borderColor: 'white',
        transform: [{ rotate: '5deg' }], // Counter-rotate to keep image straight
    },
    progressSection: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        marginRight: 15,
    },
    progressInfo: {
        flexDirection: 'row',
        alignItems: 'baseline',
        marginBottom: 4,
    },
    progressText: {
        color: '#4A4A4A',
        fontWeight: 'bold',
        fontSize: 12,
        marginRight: 8,
    },
    statusText: {
        color: '#4A4A4A',
        fontSize: 12,
    },
    progressBar: {
        width: '100%',
    },
    countText: {
        color: '#4A4A4A',
        fontWeight: 'bold',
        fontSize: 16,
    },
});

export default UploaderProgressBar;