import { Ionicons } from "@expo/vector-icons";
import React, { useMemo } from "react";
import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import * as Progress from "react-native-progress";
import _ from "lodash";
export default function UploadProgress({ uploads, setUploads }) {
  const uploadKeys = useMemo(() => {
    if (uploads) return Object.keys(uploads);
    return [];
  }, [uploads]);

  return (
    <View style={styles.container}>
      <ScrollView>
        {uploadKeys.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>
            <TouchableOpacity
              onPress={() =>
                setUploads((prevUploads) => _.omit(prevUploads, key))
              }
            >
              <Ionicons name="ios-close" size={32} />
            </TouchableOpacity>
          </View>
        ))}
      </ScrollView>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    display: "flex",
    //flex: 1,
  },
  progressItem: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 12,
    marginLeft: 12,
    marginRight: 12,
  },
  progressText: {
    flex: 1,
  },
  progressBarContainer: {
    flex: 3,
    marginLeft: 12,
    marginRight: 12,
  },
});