import { __assign } from 'tslib';
import { withThemeableProps } from '../../useThemeable.js';
import { classNamesFunction, getId } from '@uifabric-vue/utilities';
import Vue from 'vue';

var getClassNames = classNamesFunction();
var ZERO_THRESHOLD = 0.01;
var ProgressIndicatorBase = Vue.extend({
  name: "ProgressIndicatorBase",
  props: __assign(__assign({}, withThemeableProps()), { progressHidden: { type: Boolean, default: false }, percentComplete: { type: Number, default: void 0 }, label: { type: String, default: null }, description: { type: String, default: null }, barHeight: { type: Number, default: 2 }, ariaValueText: { type: String, default: void 0 } }),
  computed: {
    classNames: function() {
      var _a = this, styles = _a.styles, theme = _a.theme, className = _a.className, percentComplete = _a.percentComplete, barHeight = _a.barHeight;
      return getClassNames(styles, {
        theme: theme,
        className: className,
        barHeight: barHeight,
        indeterminate: percentComplete === void 0
      });
    },
    uid: function() {
      return getId();
    }
  },
  render: function(h) {
    var _a, _b, _c, _d;
    var _e = this, ariaValueText = _e.ariaValueText, classNames = _e.classNames, label = _e.label, progressHidden = _e.progressHidden, description = _e.description;
    var percentComplete = typeof this.percentComplete === "number" ? Math.min(100, Math.max(0, this.percentComplete * 100)) : void 0;
    var progressBarStyles = {
      width: percentComplete !== void 0 ? percentComplete + "%" : void 0,
      transition: percentComplete !== void 0 && percentComplete < ZERO_THRESHOLD ? "none" : void 0
    };
    var ariaValueMin = percentComplete !== void 0 ? 0 : void 0;
    var ariaValueMax = percentComplete !== void 0 ? 100 : void 0;
    var ariaValueNow = percentComplete !== void 0 ? Math.floor(percentComplete) : void 0;
    return h("div", { class: classNames.root }, [
      (this.$scopedSlots.label || label) && h("div", { class: classNames.itemName }, ((_b = (_a = this.$scopedSlots).label) === null || _b === void 0 ? void 0 : _b.call(_a, {})) || label),
      !progressHidden && h("div", { class: classNames.itemProgress }, [
        h("div", { class: classNames.progressTrack }),
        h("div", {
          class: classNames.progressBar,
          style: progressBarStyles,
          attrs: {
            role: "progressbar",
            "aria-describedby": description ? this.uid + "-label" : void 0,
            "aria-labelledby": label ? this.uid + "-description" : void 0,
            "aria-valuemin": ariaValueMin,
            "aria-valuemax": ariaValueMax,
            "aria-valuenow": ariaValueNow,
            "aria-valuetext": ariaValueText
          }
        })
      ]),
      (this.$scopedSlots.description || description) && h("div", { class: classNames.itemDescription }, ((_d = (_c = this.$scopedSlots).description) === null || _d === void 0 ? void 0 : _d.call(_c, {})) || description)
    ]);
  }
});

export { ProgressIndicatorBase };
