import { StyleSheet, Text, View } from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectPhotos } from "../../redux/photos/photos.selectors";

const mapStateToProps = createStructuredSelector({
  photos: selectPhotos,
});

export default connect(mapStateToProps, null)(UploadProgress);

export function UploadProgress({ photos }) {
  if (photos?.length === 0) return null;
  return (
    <View style={styles.modalContainer}>
      <Text>Upload Progress.</Text>
      <Text>{JSON.stringify(photos)}</Text>
      {/* 
        <View style={styles.modal}>
          {Object.keys(progress.files).map((key) => (
            <View key={key} style={styles.progressItem}>
              <Text style={styles.progressText}>
                {progress.files[key].filename} 
              </Text>
              <View style={styles.progressBarContainer}>
                <ProgressBar
                  progress={progress.files[key].percent}
                  style={styles.progress}
                  color={progress.files[key].percent === 1 ? "green" : "blue"}
                />
                <View
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                  }}
                >
                  <Text>{`${formatBytes(
                    progress.files[key].loaded /
                      (((progress.files[key].uploadEnd || new Date()) -
                        progress.files[key].uploadStart) /
                        1000)
                  )}/sec`}</Text>
                  {progress.files[key].percent === 1 && (
                    <>
                      <ActivityIndicator style={{ marginLeft: 12 }} />
                      <Text style={{ marginLeft: 4 }}>Processing...</Text>
                    </>
                  )}
                </View>
              </View>
            </View>
          ))}
          <View style={styles.centeredView}>
            {progress.statusText ? (
              <>
                <ActivityIndicator style={{ marginLeft: 12 }} />
                <Text style={{ marginLeft: 4 }}>{progress.statusText}</Text>
                <Divider />
              </>
            ) : (
              <>
                <Text>{`${progress.totalFilesCompleted} of ${progress.totalFiles} uploaded.`}</Text>
                <Text>{`${formatBytes(progress.totalUploaded)} of ${formatBytes(
                  progress.totalToUpload
                )} uploaded.`}</Text>
              </>
            )} 
            
          </View>
        </View>
            */}
    </View>
  );
}
const styles = StyleSheet.create({
  modalContainer: {
    display: "flex",
    flex: 1,
    justifyContent: "center",
  },
  modal: {
    //flex: 1,
    display: "flex",
    marginLeft: 20,
    marginRight: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 18,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  centeredView: {
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22,
  },
  progressItem: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 12,
    marginLeft: 12,
    marginRight: 12,
  },
  progressText: {
    flex: 1,
  },
  progressBarContainer: {
    flex: 3,
    marginLeft: 12,
    marginRight: 12,
  },
});
