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

export default function UploadProgress({ uploads }) {
  return (
    <View style={styles.container}>
      <ScrollView>
        {Object.keys(uploads).map((key) => (
          <View key={key} style={styles.progressItem}>
            <Text style={styles.progressText}>{key}</Text>
            <View style={styles.progressBarContainer}>
              <Progress.Bar
                style={styles.progress}
                height={10}
                width={null}
                progress={uploads[key].percent}
                color={uploads[key].percent === 1 ? "green" : "blue"}
              />
            </View>
          </View>
        ))}
      </ScrollView>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    display: "flex",
    //flex: 1,
  },
  progressItem: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 12,
  },
  progressText: {
    flex: 1,
  },
  progressBarContainer: {
    flex: 1,
    marginLeft: 12,
    marginRight: 12,
  },
});