import { clearUploadError } from "@/redux/photos/photos.actions";
import theme from "@/util/theme";
import { formatBytes } from "@/util/uploadUtils";
import { useTranslation } from "react-i18next";
import { StyleSheet, View } from "react-native";
import { ProgressBar, Text } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  selectPhotos,
  selectUploadError,
  selectUploadProgress,
} from "../../redux/photos/photos.selectors";
import ErrorDisplay from "../error/error-display";

const mapStateToProps = createStructuredSelector({
  photos: selectPhotos,
  photoUploadProgress: selectUploadProgress,
  uploadError: selectUploadError,
});
const mapDispatchToProps = (dispatch) => ({
  clearError: () => dispatch(clearUploadError()),
});

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

export function UploadProgress({
  photos,
  photoUploadProgress,
  uploadError,
  clearError,
}) {
  const { t } = useTranslation();
  if (photos?.length === 0) return null;
  if (uploadError)
    return <ErrorDisplay error={uploadError} onDismiss={clearError} />;
  return (
    <View style={styles.modalContainer}>
      <View style={styles.modal}>
        <Text variant="titleLarge" style={styles.title}>
          {t("general.labels.uploadprogress")}
        </Text>

        {Object.keys(photoUploadProgress).map((key) => (
          <View key={key} style={styles.progressItem}>
            <Text
              style={styles.progressText}
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              {photoUploadProgress[key].fileName}
            </Text>
            <View style={styles.progressBarContainer}>
              <ProgressBar
                progress={photoUploadProgress[key].progress}
                style={styles.progress}
                color={
                  photoUploadProgress[key].progress === 1 ? "green" : "blue"
                }
              />
              <View
                style={{
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                }}
              >
                <Text>{`${formatBytes(
                  photoUploadProgress[key].loaded /
                    (((photoUploadProgress[key].endTime || new Date()) -
                      photoUploadProgress[key].startTime) /
                      1000)
                )}/sec`}</Text>
              </View>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  modalContainer: {
    display: "flex",
    // flex: 1,
    marginTop: 14,
    marginBottom: 14,
    justifyContent: "center",
  },
  modal: {
    //flex: 1,
    display: "flex",
    marginLeft: 12,
    marginRight: 12,
    backgroundColor: theme.colors.elevation.level3,
    borderRadius: 20,
    paddingTop: 12,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  title: {
    alignSelf: "center",
    alignItems: "center",
    marginBottom: 12,
    paddingLeft: 12,
    paddingRight: 12,
  },
  centeredView: {
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22,
  },
  progressItem: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 12,
    marginLeft: 12,
    marginRight: 12,
  },
  progressText: {
    flex: 1,
    flexShrink: 1,
  },
  progressBarContainer: {
    flex: 3,
    marginLeft: 12,
    marginRight: 12,
  },
});