import * as tslib_1 from "tslib";
import * as React from 'react';
import { Rating, RatingSize } from 'office-ui-fabric-react/lib/Rating';
import { getTheme, createTheme } from '../../../Styling';
import './Rating.Basic.Example.scss';
var RatingBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(RatingBasicExample, _super);
    function RatingBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onLargeStarChanged = function (rating) {
            _this.setState({
                largeStarRating: rating
            });
        };
        _this._onSmallStarChanged = function (rating) {
            _this.setState({
                smallStarRating: rating
            });
        };
        _this._onTenStarChanged = function (rating) {
            _this.setState({
                tenStarRating: rating
            });
        };
        _this._onThemedStarChanged = function (rating) {
            _this.setState({
                themedStarRating: rating
            });
        };
        _this.state = {
            largeStarRating: undefined,
            smallStarRating: 3,
            tenStarRating: undefined,
            themedStarRating: undefined
        };
        _this._customTheme = createTheme(getTheme());
        _this._customTheme.semanticColors.bodySubtext = '#DFDFDF';
        _this._customTheme.semanticColors.bodyTextChecked = '#1E9FE8';
        return _this;
    }
    // tslint:disable:jsx-no-lambda
    RatingBasicExample.prototype.render = function () {
        return (React.createElement("div", { className: "ms-RatingBasicExample" },
            "Large Stars:",
            React.createElement(Rating, { id: 'largeRatingStar', min: 1, max: 5, size: RatingSize.Large, rating: this.state.largeStarRating, getAriaLabel: this._getRatingComponentAriaLabel, onChanged: this._onLargeStarChanged, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, ariaLabelFormat: '{0} of {1} stars selected' }),
            "Small Stars",
            React.createElement(Rating, { id: 'smallRatingStar', min: 1, max: 5, rating: this.state.smallStarRating, onChanged: this._onSmallStarChanged, getAriaLabel: this._getRatingComponentAriaLabel, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, ariaLabelFormat: '{0} of {1} stars selected' }),
            "10 Small Stars",
            React.createElement(Rating, { id: 'tenRatingStar', min: 1, max: 10, rating: this.state.tenStarRating, onChanged: this._onTenStarChanged, getAriaLabel: this._getRatingComponentAriaLabel, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, ariaLabelFormat: '{0} of {1} stars selected' }),
            "Disabled:",
            React.createElement(Rating, { min: 1, max: 5, rating: this.state.rating, disabled: true, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, ariaLabelFormat: '{0} of {1} stars selected' }),
            "Half star in readOnly mode:",
            React.createElement(Rating, { id: 'readOnlyRatingStar', min: 1, max: 5, rating: 2.5, getAriaLabel: this._getRatingComponentAriaLabel, readOnly: true, ariaLabelFormat: '{0} of {1} stars selected' }),
            "Themed star",
            React.createElement(Rating, { id: 'themedRatingStar', min: 1, max: 5, rating: this.state.themedStarRating, onChanged: this._onThemedStarChanged, getAriaLabel: this._getRatingComponentAriaLabel, onFocus: function () { return console.log('onFocus called'); }, onBlur: function () { return console.log('onBlur called'); }, ariaLabelFormat: '{0} of {1} stars selected', theme: this._customTheme })));
    };
    RatingBasicExample.prototype._getRatingComponentAriaLabel = function (rating, maxRating) {
        return "Rating value is " + rating + " of " + maxRating;
    };
    return RatingBasicExample;
}(React.Component));
export { RatingBasicExample };
//# sourceMappingURL=Rating.Basic.Example.js.map