text: function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  
  var throttle = require('lodash.throttle');
  
  var classNames = require('classnames');
  
  var statusBarStates = require('./StatusBarStates');
  
  var prettyBytes = require('@uppy/utils/lib/prettyBytes');
  
  var prettyETA = require('@uppy/utils/lib/prettyETA');
  
  var _require = require('preact'),
      h = _require.h;
  
  function calculateProcessingProgress(files) {
    // Collect pre or postprocessing progress states.
    var progresses = [];
    Object.keys(files).forEach(function (fileID) {
      var progress = files[fileID].progress;
  
      if (progress.preprocess) {
        progresses.push(progress.preprocess);
      }
  
      if (progress.postprocess) {
        progresses.push(progress.postprocess);
      }
    }); // In the future we should probably do this differently. For now we'll take the
    // mode and message from the first file…
  
    var _progresses$ = progresses[0],
        mode = _progresses$.mode,
        message = _progresses$.message;
    var value = progresses.filter(isDeterminate).reduce(function (total, progress, index, all) {
      return total + progress.value / all.length;
    }, 0);
  
    function isDeterminate(progress) {
      return progress.mode === 'determinate';
    }
  
    return {
      mode: mode,
      message: message,
      value: value
    };
  }
  
  function togglePauseResume(props) {
    if (props.isAllComplete) return;
  
    if (!props.resumableUploads) {
      return props.cancelAll();
    }
  
    if (props.isAllPaused) {
      return props.resumeAll();
    }
  
    return props.pauseAll();
  }
  
  module.exports = function (props) {
    props = props || {};
    var _props = props,
        newFiles = _props.newFiles,
        allowNewUpload = _props.allowNewUpload,
        isUploadInProgress = _props.isUploadInProgress,
        isAllPaused = _props.isAllPaused,
        resumableUploads = _props.resumableUploads,
        error = _props.error,
        hideUploadButton = _props.hideUploadButton,
        hidePauseResumeButton = _props.hidePauseResumeButton,
        hideCancelButton = _props.hideCancelButton,
        hideRetryButton = _props.hideRetryButton;
    var uploadState = props.uploadState;
    var progressValue = props.totalProgress;
    var progressMode;
    var progressBarContent;
  
    if (uploadState === statusBarStates.STATE_PREPROCESSING || uploadState === statusBarStates.STATE_POSTPROCESSING) {
      var progress = calculateProcessingProgress(props.files);
      progressMode = progress.mode;
  
      if (progressMode === 'determinate') {
        progressValue = progress.value * 100;
      }
  
      progressBarContent = ProgressBarProcessing(progress);
    } else if (uploadState === statusBarStates.STATE_COMPLETE) {
      progressBarContent = ProgressBarComplete(props);
    } else if (uploadState === statusBarStates.STATE_UPLOADING) {
      if (!props.supportsUploadProgress) {
        progressMode = 'indeterminate';
        progressValue = null;
      }
  
      progressBarContent = ProgressBarUploading(props);
    } else if (uploadState === statusBarStates.STATE_ERROR) {
      progressValue = undefined;
      progressBarContent = ProgressBarError(props);
    }
  
    var width = typeof progressValue === 'number' ? progressValue : 100;
    var isHidden = uploadState === statusBarStates.STATE_WAITING && props.hideUploadButton || uploadState === statusBarStates.STATE_WAITING && !props.newFiles > 0 || uploadState === statusBarStates.STATE_COMPLETE && props.hideAfterFinish;
    var showUploadBtn = !error && newFiles && !isUploadInProgress && !isAllPaused && allowNewUpload && !hideUploadButton;
    var showCancelBtn = !hideCancelButton && uploadState !== statusBarStates.STATE_WAITING && uploadState !== statusBarStates.STATE_COMPLETE;
    var showPauseResumeBtn = resumableUploads && !hidePauseResumeButton && uploadState === statusBarStates.STATE_UPLOADING;
    var showRetryBtn = error && !hideRetryButton;
    var progressClassNames = "uppy-StatusBar-progress\n                           " + (progressMode ? 'is-' + progressMode : '');
    var statusBarClassNames = classNames({
      'uppy-Root': props.isTargetDOMEl
    }, 'uppy-StatusBar', "is-" + uploadState);
    return h("div", {
      class: statusBarClassNames,
      "aria-hidden": isHidden
    }, h("div", {
      class: progressClassNames,
      style: {
        width: width + '%'
      },
      role: "progressbar",
      "aria-valuemin": "0",
      "aria-valuemax": "100",
      "aria-valuenow": progressValue
    }), progressBarContent, h("div", {
      class: "uppy-StatusBar-actions"
    }, showUploadBtn ? h(UploadBtn, _extends({}, props, {
      uploadState: uploadState
    })) : null, showRetryBtn ? h(RetryBtn, props) : null, showPauseResumeBtn ? h(PauseResumeButton, props) : null, showCancelBtn ? h(CancelBtn, props) : null));
  };
  
  var UploadBtn = function UploadBtn(props) {
    var uploadBtnClassNames = classNames('uppy-u-reset', 'uppy-c-btn', 'uppy-StatusBar-actionBtn', 'uppy-StatusBar-actionBtn--upload', {
      'uppy-c-btn-primary': props.uploadState === statusBarStates.STATE_WAITING
    });
    return h("button", {
      type: "button",
      class: uploadBtnClassNames,
      "aria-label": props.i18n('uploadXFiles', {
        smart_count: props.newFiles
      }),
      onclick: props.startUpload,
      "data-uppy-super-focusable": true
    }, props.newFiles && props.isUploadStarted ? props.i18n('uploadXNewFiles', {
      smart_count: props.newFiles
    }) : props.i18n('uploadXFiles', {
      smart_count: props.newFiles
    }));
  };
  
  var RetryBtn = function RetryBtn(props) {
    return h("button", {
      type: "button",
      class: "uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--retry",
      "aria-label": props.i18n('retryUpload'),
      onclick: props.retryAll,
      "data-uppy-super-focusable": true
    }, h("svg", {
      "aria-hidden": "true",
      focusable: "false",
      class: "UppyIcon",
      width: "8",
      height: "10",
      viewBox: "0 0 8 10"
    }, h("path", {
      d: "M4 2.408a2.75 2.75 0 1 0 2.75 2.75.626.626 0 0 1 1.25.018v.023a4 4 0 1 1-4-4.041V.25a.25.25 0 0 1 .389-.208l2.299 1.533a.25.25 0 0 1 0 .416l-2.3 1.533A.25.25 0 0 1 4 3.316v-.908z"
    })), props.i18n('retry'));
  };
  
  var CancelBtn = function CancelBtn(props) {
    return h("button", {
      type: "button",
      class: "uppy-u-reset uppy-StatusBar-actionCircleBtn",
      title: props.i18n('cancel'),
      "aria-label": props.i18n('cancel'),
      onclick: props.cancelAll,
      "data-uppy-super-focusable": true
    }, h("svg", {
      "aria-hidden": "true",
      focusable: "false",
      class: "UppyIcon",
      width: "16",
      height: "16",
      viewBox: "0 0 16 16"
    }, h("g", {
      fill: "none",
      "fill-rule": "evenodd"
    }, h("circle", {
      fill: "#888",
      cx: "8",
      cy: "8",
      r: "8"
    }), h("path", {
      fill: "#FFF",
      d: "M9.283 8l2.567 2.567-1.283 1.283L8 9.283 5.433 11.85 4.15 10.567 6.717 8 4.15 5.433 5.433 4.15 8 6.717l2.567-2.567 1.283 1.283z"
    }))));
  };
  
  var PauseResumeButton = function PauseResumeButton(props) {
    var isAllPaused = props.isAllPaused,
        i18n = props.i18n;
    var title = isAllPaused ? i18n('resume') : i18n('pause');
    return h("button", {
      title: title,
      "aria-label": title,
      class: "uppy-u-reset uppy-StatusBar-actionCircleBtn",
      type: "button",
      onclick: function onclick() {
        return togglePauseResume(props);
      },
      "data-uppy-super-focusable": true
    }, isAllPaused ? h("svg", {
      "aria-hidden": "true",
      focusable: "false",
      class: "UppyIcon",
      width: "16",
      height: "16",
      viewBox: "0 0 16 16"
    }, h("g", {
      fill: "none",
      "fill-rule": "evenodd"
    }, h("circle", {
      fill: "#888",
      cx: "8",
      cy: "8",
      r: "8"
    }), h("path", {
      fill: "#FFF",
      d: "M6 4.25L11.5 8 6 11.75z"
    }))) : h("svg", {
      "aria-hidden": "true",
      focusable: "false",
      class: "UppyIcon",
      width: "16",
      height: "16",
      viewBox: "0 0 16 16"
    }, h("g", {
      fill: "none",
      "fill-rule": "evenodd"
    }, h("circle", {
      fill: "#888",
      cx: "8",
      cy: "8",
      r: "8"
    }), h("path", {
      d: "M5 4.5h2v7H5v-7zm4 0h2v7H9v-7z",
      fill: "#FFF"
    }))));
  };
  
  var LoadingSpinner = function LoadingSpinner() {
    return h("svg", {
      class: "uppy-StatusBar-spinner",
      "aria-hidden": "true",
      focusable: "false",
      width: "14",
      height: "14"
    }, h("path", {
      d: "M13.983 6.547c-.12-2.509-1.64-4.893-3.939-5.936-2.48-1.127-5.488-.656-7.556 1.094C.524 3.367-.398 6.048.162 8.562c.556 2.495 2.46 4.52 4.94 5.183 2.932.784 5.61-.602 7.256-3.015-1.493 1.993-3.745 3.309-6.298 2.868-2.514-.434-4.578-2.349-5.153-4.84a6.226 6.226 0 0 1 2.98-6.778C6.34.586 9.74 1.1 11.373 3.493c.407.596.693 1.282.842 1.988.127.598.073 1.197.161 1.794.078.525.543 1.257 1.15.864.525-.341.49-1.05.456-1.592-.007-.15.02.3 0 0",
      "fill-rule": "evenodd"
    }));
  };
  
  var ProgressBarProcessing = function ProgressBarProcessing(props) {
    var value = Math.round(props.value * 100);
    return h("div", {
      class: "uppy-StatusBar-content"
    }, h(LoadingSpinner, null), props.mode === 'determinate' ? value + "% \xB7 " : '', props.message);
  };
  
  var renderDot = function renderDot() {
    return " \xB7 ";
  };
  
  var ProgressDetails = function ProgressDetails(props) {
    var ifShowFilesUploadedOfTotal = props.numUploads > 1;
    return h("div", {
      class: "uppy-StatusBar-statusSecondary"
    }, ifShowFilesUploadedOfTotal && props.i18n('filesUploadedOfTotal', {
      complete: props.complete,
      smart_count: props.numUploads
    }), h("span", {
      class: "uppy-StatusBar-additionalInfo"
    }, ifShowFilesUploadedOfTotal && renderDot(), props.i18n('dataUploadedOfTotal', {
      complete: prettyBytes(props.totalUploadedSize),
      total: prettyBytes(props.totalSize)
    }), renderDot(), props.i18n('xTimeLeft', {
      time: prettyETA(props.totalETA)
    })));
  };
  
  var UnknownProgressDetails = function UnknownProgressDetails(props) {
    return h("div", {
      class: "uppy-StatusBar-statusSecondary"
    }, props.i18n('filesUploadedOfTotal', {
      complete: props.complete,
      smart_count: props.numUploads
    }));
  };
  
  var UploadNewlyAddedFiles = function UploadNewlyAddedFiles(props) {
    var uploadBtnClassNames = classNames('uppy-u-reset', 'uppy-c-btn', 'uppy-StatusBar-actionBtn', 'uppy-StatusBar-actionBtn--uploadNewlyAdded');
    return h("div", {
      class: "uppy-StatusBar-statusSecondary"
    }, h("div", {
      class: "uppy-StatusBar-statusSecondaryHint"
    }, props.i18n('xMoreFilesAdded', {
      smart_count: props.newFiles
    })), h("button", {
      type: "button",
      class: uploadBtnClassNames,
      "aria-label": props.i18n('uploadXFiles', {
        smart_count: props.newFiles
      }),
      onclick: props.startUpload
    }, props.i18n('upload')));
  };
  
  var ThrottledProgressDetails = throttle(ProgressDetails, 500, {
    leading: true,
    trailing: true
  });
  
  var ProgressBarUploading = function ProgressBarUploading(props) {
    if (!props.isUploadStarted || props.isAllComplete) {
      return null;
    }
  
    var title = props.isAllPaused ? props.i18n('paused') : props.i18n('uploading');
    var showUploadNewlyAddedFiles = props.newFiles && props.isUploadStarted;
    return h("div", {
      class: "uppy-StatusBar-content",
      "aria-label": title,
      title: title
    }, !props.isAllPaused ? h(LoadingSpinner, null) : null, h("div", {
      class: "uppy-StatusBar-status"
    }, h("div", {
      class: "uppy-StatusBar-statusPrimary"
    }, props.supportsUploadProgress ? title + ": " + props.totalProgress + "%" : title), !props.isAllPaused && !showUploadNewlyAddedFiles && props.showProgressDetails ? props.supportsUploadProgress ? h(ThrottledProgressDetails, props) : h(UnknownProgressDetails, props) : null, showUploadNewlyAddedFiles ? h(UploadNewlyAddedFiles, props) : null));
  };
  
  var ProgressBarComplete = function ProgressBarComplete(_ref) {
    var totalProgress = _ref.totalProgress,
        i18n = _ref.i18n;
    return h("div", {
      class: "uppy-StatusBar-content",
      role: "status",
      title: i18n('complete')
    }, h("div", {
      class: "uppy-StatusBar-status"
    }, h("div", {
      class: "uppy-StatusBar-statusPrimary"
    }, h("svg", {
      "aria-hidden": "true",
      focusable: "false",
      class: "uppy-StatusBar-statusIndicator UppyIcon",
      width: "15",
      height: "11",
      viewBox: "0 0 15 11"
    }, h("path", {
      d: "M.414 5.843L1.627 4.63l3.472 3.472L13.202 0l1.212 1.213L5.1 10.528z"
    })), i18n('complete'))));
  };
  
  var ProgressBarError = function ProgressBarError(_ref2) {
    var error = _ref2.error,
        retryAll = _ref2.retryAll,
        hideRetryButton = _ref2.hideRetryButton,
        i18n = _ref2.i18n;
  
    function displayErrorAlert() {
      var errorMessage = i18n('uploadFailed') + " \n\n " + error;
      alert(errorMessage);
    }
  
    return h("div", {
      class: "uppy-StatusBar-content",
      role: "alert",
      title: i18n('uploadFailed')
    }, h("div", {
      class: "uppy-StatusBar-status"
    }, h("div", {
      class: "uppy-StatusBar-statusPrimary"
    }, h("svg", {
      "aria-hidden": "true",
      focusable: "false",
      class: "uppy-StatusBar-statusIndicator UppyIcon",
      width: "11",
      height: "11",
      viewBox: "0 0 11 11"
    }, h("path", {
      d: "M4.278 5.5L0 1.222 1.222 0 5.5 4.278 9.778 0 11 1.222 6.722 5.5 11 9.778 9.778 11 5.5 6.722 1.222 11 0 9.778z"
    })), i18n('uploadFailed'))), h("span", {
      class: "uppy-StatusBar-details",
      "aria-label": error,
      "data-microtip-position": "top-right",
      "data-microtip-size": "medium",
      role: "tooltip",
      onclick: displayErrorAlert
    }, "?"));
  };