import { __assign } from "tslib";
import { withThemeableProps } from '../../useThemeable';
import { classNamesFunction, getId } from '@uifabric-vue/utilities';
import Vue from 'vue';
var getClassNames = classNamesFunction();
// if the percentComplete is near 0, don't animate it.
// This prevents animations on reset to 0 scenarios
var ZERO_THRESHOLD = 0.01;
export var ProgressIndicatorBase = Vue.extend({
    name: 'ProgressIndicatorBase',
    props: __assign(__assign({}, withThemeableProps()), { progressHidden: { type: Boolean, default: false }, percentComplete: { type: Number, default: undefined }, label: { type: String, default: null }, description: { type: String, default: null }, barHeight: { type: Number, default: 2 }, ariaValueText: { type: String, default: undefined } }),
    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 === undefined,
            });
        },
        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))
            : undefined;
        var progressBarStyles = {
            width: percentComplete !== undefined ? percentComplete + '%' : undefined,
            transition: percentComplete !== undefined && percentComplete < ZERO_THRESHOLD ? 'none' : undefined,
        };
        var ariaValueMin = percentComplete !== undefined ? 0 : undefined;
        var ariaValueMax = percentComplete !== undefined ? 100 : undefined;
        var ariaValueNow = percentComplete !== undefined ? Math.floor(percentComplete) : undefined;
        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') : undefined,
                        'aria-labelledby': label ? (this.uid + '-description') : undefined,
                        '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),
        ]);
    },
});
//# sourceMappingURL=ProgressIndicator.base.js.map