"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Rating_1 = require("office-ui-fabric-react/lib-commonjs/Rating");
var Styling_1 = require("office-ui-fabric-react/lib-commonjs/Styling");
var getRatingComponentAriaLabel = function (rating, maxRating) {
    return "Rating value is " + rating + " of " + maxRating;
};
var customTheme = Styling_1.createTheme(Styling_1.getTheme());
customTheme.semanticColors.bodySubtext = '#DFDFDF';
customTheme.semanticColors.bodyTextChecked = '#1E9FE8';
exports.RatingBasicExample = function () {
    var _a = React.useState(1), largeStarRating = _a[0], setLargeStarsRating = _a[1];
    var _b = React.useState(3), smallStarRating = _b[0], setSmallStarRating = _b[1];
    var _c = React.useState(1), tenStarRating = _c[0], setTenStarRatingg = _c[1];
    var _d = React.useState(2.5), customIconStarRating = _d[0], setCustomIconStarRating = _d[1];
    var _e = React.useState(1), themedStarRating = _e[0], setThemedStarRating = _e[1];
    var onLargeStarChange = function (ev, rating) {
        setLargeStarsRating(rating);
    };
    var onSmallStarChange = function (ev, rating) {
        setSmallStarRating(rating);
    };
    var onTenStarChange = function (ev, rating) {
        setTenStarRatingg(rating);
    };
    var onCustomIconStarChange = function (ev, rating) {
        setCustomIconStarRating(rating);
    };
    var onThemedStarChange = function (ev, rating) {
        setThemedStarRating(rating);
    };
    return (React.createElement("div", null,
        "Large Stars:",
        React.createElement(Rating_1.Rating, { min: 1, max: 5, size: Rating_1.RatingSize.Large, rating: largeStarRating, ariaLabel: "Large stars", 
            // eslint-disable-next-line react/jsx-no-bind
            onChange: onLargeStarChange, ariaLabelFormat: '{0} of {1} stars' }),
        "Small Stars",
        React.createElement(Rating_1.Rating, { id: "small", min: 1, max: 5, rating: smallStarRating, 
            // eslint-disable-next-line react/jsx-no-bind
            onChange: onSmallStarChange, ariaLabel: "Small stars", ariaLabelFormat: '{0} of {1} stars' }),
        "10 Small Stars",
        React.createElement(Rating_1.Rating, { min: 1, max: 10, rating: tenStarRating, 
            // eslint-disable-next-line react/jsx-no-bind
            onChange: onTenStarChange, ariaLabel: "10 small stars", ariaLabelFormat: '{0} of {1} stars' }),
        "Disabled:",
        React.createElement(Rating_1.Rating, { min: 1, max: 5, rating: 1, disabled: true, ariaLabelFormat: '{0} of {1} stars' }),
        "Half star in readOnly mode:",
        React.createElement(Rating_1.Rating, { min: 1, max: 5, rating: 2.5, getAriaLabel: getRatingComponentAriaLabel, readOnly: true, ariaLabelFormat: '{0} of {1} stars' }),
        "Custom icons:",
        React.createElement(Rating_1.Rating, { min: 1, max: 5, rating: customIconStarRating, 
            // eslint-disable-next-line react/jsx-no-bind
            onChange: onCustomIconStarChange, ariaLabel: "Custom icons", ariaLabelFormat: '{0} of {1} stars', icon: "StarburstSolid", unselectedIcon: "Starburst" }),
        "Themed star",
        React.createElement(Rating_1.Rating, { min: 1, max: 5, rating: themedStarRating, 
            // eslint-disable-next-line react/jsx-no-bind
            onChange: onThemedStarChange, ariaLabel: "Themed star", ariaLabelFormat: '{0} of {1} stars', theme: customTheme })));
};
//# sourceMappingURL=Rating.Basic.Example.js.map