define(["require", "exports", "tslib", "react", "../../Utilities", "../../Icon", "../../FocusZone", "./Rating.types"], function (require, exports, tslib_1, React, Utilities_1, Icon_1, FocusZone_1, Rating_types_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var getClassNames = Utilities_1.classNamesFunction();
    var RatingStar = function (props) { return (React.createElement("div", { className: props.classNames.ratingStar, key: props.id },
        React.createElement(Icon_1.Icon, { className: props.classNames.ratingStarBack, iconName: "FavoriteStarFill" }),
        !props.disabled && (React.createElement(Icon_1.Icon, { className: props.classNames.ratingStarFront, iconName: "FavoriteStarFill", style: { width: props.fillPercentage + '%' } })))); };
    var RatingBase = /** @class */ (function (_super) {
        tslib_1.__extends(RatingBase, _super);
        function RatingBase(props) {
            var _this = _super.call(this, props) || this;
            _this._id = Utilities_1.getId('Rating');
            _this._min = _this.props.allowZeroStars ? 0 : 1;
            if (_this.props.min !== undefined && _this.props.min !== 1) {
                _this._min = _this.props.min;
            }
            _this._labelId = Utilities_1.getId('RatingLabel');
            _this.state = {
                rating: _this._getInitialValue(props)
            };
            return _this;
        }
        RatingBase.prototype.componentWillReceiveProps = function (nextProps) {
            if (typeof nextProps.rating !== 'undefined' && nextProps.rating !== this.state.rating) {
                this.setState({
                    rating: this._getClampedRating(nextProps.rating)
                });
            }
        };
        RatingBase.prototype.render = function () {
            var id = this._id;
            var stars = [];
            var starIds = [];
            var _a = this.props, disabled = _a.disabled, getAriaLabel = _a.getAriaLabel, styles = _a.styles, max = _a.max, rating = _a.rating, readOnly = _a.readOnly, size = _a.size, theme = _a.theme;
            this._classNames = getClassNames(styles, {
                disabled: disabled,
                readOnly: readOnly,
                theme: theme
            });
            for (var i = this._min; i <= max; i++) {
                if (i !== 0) {
                    var ratingStarProps = {
                        fillPercentage: this._getFillingPercentage(i),
                        disabled: disabled ? true : false,
                        readOnly: readOnly ? true : false,
                        classNames: this._classNames
                    };
                    starIds.push(this._getStarId(i - 1));
                    stars.push(React.createElement("button", tslib_1.__assign({ className: Utilities_1.css(this._classNames.ratingButton, (_b = {},
                            _b[this._classNames.ratingStarIsLarge] = size === Rating_types_1.RatingSize.Large,
                            _b[this._classNames.ratingStarIsSmall] = size !== Rating_types_1.RatingSize.Large,
                            _b)), id: starIds[i - 1], key: i }, (i === Math.ceil(this.state.rating) ? { 'data-is-current': true } : {}), { onFocus: this._onFocus.bind(this, i), onClick: this._onFocus.bind(this, i), disabled: disabled || readOnly ? true : false, role: "presentation", type: "button" }),
                        this._getLabel(i),
                        React.createElement(RatingStar, tslib_1.__assign({ key: i + 'rating' }, ratingStarProps))));
                }
            }
            return (React.createElement("div", { className: Utilities_1.css('ms-Rating-star', this._classNames.root, (_c = {},
                    _c[this._classNames.rootIsLarge] = size === Rating_types_1.RatingSize.Large,
                    _c[this._classNames.rootIsSmall] = size !== Rating_types_1.RatingSize.Large,
                    _c)), "aria-label": getAriaLabel ? getAriaLabel(this.state.rating ? this.state.rating : 0, this.props.max) : '', id: id },
                React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal, tabIndex: readOnly ? 0 : -1, className: Utilities_1.css(this._classNames.ratingFocusZone, (_d = {},
                        _d[this._classNames.rootIsLarge] = size === Rating_types_1.RatingSize.Large,
                        _d[this._classNames.rootIsSmall] = size !== Rating_types_1.RatingSize.Large,
                        _d)), "data-is-focusable": readOnly ? true : false, defaultActiveElement: rating ? starIds[rating - 1] && '#' + starIds[rating - 1] : undefined }, stars)));
            var _b, _c, _d;
        };
        RatingBase.prototype._getStarId = function (index) {
            return this._id + '-star-' + index;
        };
        RatingBase.prototype._onFocus = function (value, ev) {
            if (this.state.rating !== value) {
                this.setState({
                    rating: value
                });
                var onChanged = this.props.onChanged;
                if (onChanged) {
                    onChanged(value);
                }
            }
        };
        RatingBase.prototype._getLabel = function (rating) {
            var text = this.props.ariaLabelFormat || '';
            return (React.createElement("span", { id: this._labelId + "-" + rating, className: this._classNames.labelText }, Utilities_1.format(text, rating, this.props.max)));
        };
        RatingBase.prototype._getInitialValue = function (props) {
            if (typeof props.rating === 'undefined') {
                return this._min;
            }
            if (props.rating === null) {
                return undefined;
            }
            return this._getClampedRating(props.rating);
        };
        RatingBase.prototype._getClampedRating = function (rating) {
            return Math.min(Math.max(rating, this._min), this.props.max);
        };
        RatingBase.prototype._getFillingPercentage = function (starPosition) {
            var ceilValue = Math.ceil(this.state.rating);
            var fillPercentage = 100;
            if (starPosition === this.state.rating) {
                fillPercentage = 100;
            }
            else if (starPosition === ceilValue) {
                fillPercentage = 100 * (this.state.rating % 1);
            }
            else if (starPosition > ceilValue) {
                fillPercentage = 0;
            }
            return fillPercentage;
        };
        RatingBase.defaultProps = {
            min: 1,
            max: 5
        };
        return RatingBase;
    }(Utilities_1.BaseComponent));
    exports.RatingBase = RatingBase;
});
//# sourceMappingURL=Rating.base.js.map