import { __assign, __decorate, __extends, __metadata } from "tslib";
import { Component, Prop, Watch } from 'vue-property-decorator';
import { Icon } from '../Icon';
import { IconButton } from '../Button';
import { RatingSize } from './Rating.types';
import BaseComponent from '../BaseComponent';
import { classNamesFunction, css, format } from '@uifabric-vue/utilities';
var getClassNames = classNamesFunction();
var RatingBase = /** @class */ (function (_super) {
    __extends(RatingBase, _super);
    function RatingBase() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.internalValue = _this.rating;
        return _this;
    }
    Object.defineProperty(RatingBase.prototype, "classNames", {
        get: function () {
            var _a = this, disabled = _a.disabled, readonly = _a.readonly, theme = _a.theme;
            return getClassNames(this.styles, {
                disabled: disabled,
                readOnly: readonly,
                theme: theme,
            });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RatingBase.prototype, "ratingLevels", {
        get: function () {
            var _a = this, min = _a.min, max = _a.max;
            if (min < 0 || max <= min)
                return [];
            var i = min + 1;
            return Array(max - min).fill(undefined).map(function () { return i++; });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(RatingBase.prototype, "ariaLabel", {
        get: function () {
            if (!this.ariaLabelFormat)
                return '';
            return this.ariaLabelFormat.replace('{0}', "".concat(this.internalValue)).replace('{1}', "".concat(this.max));
        },
        enumerable: false,
        configurable: true
    });
    RatingBase.prototype.getRatingIconName = function (ratingLevel) {
        return this.internalValue >= ratingLevel ? this.iconName : this.unselectedIconName;
    };
    RatingBase.prototype.getRatingFillPercentage = function (ratingLevel) {
        if (ratingLevel - this.internalValue <= 0)
            return 100;
        if (ratingLevel - this.internalValue > 1)
            return 0;
        if (ratingLevel - this.internalValue > 0)
            return (1 - (ratingLevel - this.internalValue)) * 100;
        return 0;
    };
    RatingBase.prototype.setRating = function (rating) {
        this.internalValue = rating;
    };
    RatingBase.prototype.onPropValueChanged = function (newValue) {
        this.internalValue = newValue;
    };
    RatingBase.prototype.onValueChanged = function (value) {
        this.$emit('input', value);
    };
    RatingBase.prototype.getStarId = function (id, starNum) {
        return "".concat(id, "-star-").concat(starNum - 1);
    };
    RatingBase.prototype.render = function (h) {
        var _this = this;
        var _a = this, displayRating = _a.internalValue, ariaLabelFormat = _a.ariaLabelFormat, classNames = _a.classNames, readonly = _a.readonly, ariaLabel = _a.ariaLabel, max = _a.max, size = _a.size, disabled = _a.disabled, iconName = _a.iconName, unselectedIconName = _a.unselectedIconName;
        var id = 'Rating';
        var labelId = 'RatingLabel';
        var rootSizeClass = size === RatingSize.Large ? classNames.rootIsLarge : classNames.rootIsSmall;
        var $stars = this.ratingLevels.map(function (starNum) {
            var fillPercentage = _this.getRatingFillPercentage(starNum);
            return h('button', {
                key: starNum,
                attrs: __assign(__assign({ id: _this.getStarId(id, starNum) }, (starNum === Math.ceil(displayRating) && { 'data-is-current': true })), { disabled: !!(disabled || readonly), role: 'presentation', type: 'button' }),
                class: css(classNames.ratingButton, size === RatingSize.Large ? classNames.ratingStarIsLarge : classNames.ratingStarIsSmall),
                on: {
                    focus: function (ev) { return _this.setRating(starNum); },
                    click: function (ev) { return _this.setRating(starNum); },
                },
            }, [
                h('span', {
                    class: classNames.labelText,
                    attrs: {
                        id: "".concat(labelId, "-").concat(starNum),
                    },
                }, format(ariaLabelFormat || '', starNum, max)),
                h('div', { class: classNames.ratingStar }, [
                    h(Icon, {
                        class: classNames.ratingStarBack,
                        props: {
                            iconName: fillPercentage > 0 ? iconName : unselectedIconName,
                        },
                    }),
                    !disabled && h(Icon, {
                        class: classNames.ratingStarFront,
                        props: {
                            iconName: fillPercentage > 0 ? iconName : unselectedIconName,
                        },
                        style: { width: fillPercentage + '%' },
                    }),
                ]),
            ]);
        });
        return h('div', {
            ref: 'root',
            attrs: __assign(__assign({}, this.$attrs), { 'aria-label': readonly ? ariaLabel : '' }),
            class: css('ms-Rating-star', classNames.root, rootSizeClass),
        }, [
            h('div', {
                class: css(classNames.ratingFocusZone, rootSizeClass),
            }, $stars),
        ]);
    };
    __decorate([
        Prop({ type: Number, default: RatingSize.Small }),
        __metadata("design:type", Number)
    ], RatingBase.prototype, "size", void 0);
    __decorate([
        Prop({ type: Number, default: 0 }),
        __metadata("design:type", Number)
    ], RatingBase.prototype, "min", void 0);
    __decorate([
        Prop({ type: Number, default: 10 }),
        __metadata("design:type", Number)
    ], RatingBase.prototype, "max", void 0);
    __decorate([
        Prop({ type: Number, default: 0 }),
        __metadata("design:type", Number)
    ], RatingBase.prototype, "rating", void 0);
    __decorate([
        Prop({ type: String, default: '' }),
        __metadata("design:type", String)
    ], RatingBase.prototype, "ariaLabelFormat", void 0);
    __decorate([
        Prop({ type: String, default: 'FavoriteStarFill' }),
        __metadata("design:type", String)
    ], RatingBase.prototype, "iconName", void 0);
    __decorate([
        Prop({ type: String, default: 'FavoriteStar' }),
        __metadata("design:type", String)
    ], RatingBase.prototype, "unselectedIconName", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], RatingBase.prototype, "disabled", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], RatingBase.prototype, "readonly", void 0);
    __decorate([
        Watch('rating'),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Number]),
        __metadata("design:returntype", void 0)
    ], RatingBase.prototype, "onPropValueChanged", null);
    __decorate([
        Watch('internalValue'),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [String]),
        __metadata("design:returntype", void 0)
    ], RatingBase.prototype, "onValueChanged", null);
    RatingBase = __decorate([
        Component({
            components: { Icon: Icon, IconButton: IconButton },
            inheritAttrs: false,
        })
    ], RatingBase);
    return RatingBase;
}(BaseComponent));
export { RatingBase };
//# sourceMappingURL=Rating.base.js.map