import * as tslib_1 from "tslib";
import * as React from 'react';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
import { Facepile } from 'office-ui-fabric-react/lib/Facepile';
import { PersonaSize } from 'office-ui-fabric-react/lib/Persona';
import { Slider } from 'office-ui-fabric-react/lib/Slider';
import { facepilePersonas } from './FacepileExampleData';
import './Facepile.Examples.scss';
import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
var exampleStyles = exampleStylesImport;
var FacepileBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(FacepileBasicExample, _super);
    function FacepileBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this._onChangeFadeIn = function (ev, checked) {
            _this.setState(function (prevState) {
                prevState.imagesFadeIn = checked;
                return prevState;
            });
        };
        _this._onChangePersonaNumber = function (value) {
            _this.setState(function (prevState) {
                prevState.numberOfFaces = value;
                return prevState;
            });
        };
        _this._onChangePersonaSize = function (value) {
            _this.setState(function (prevState) {
                prevState.personaSize = value.key;
                return prevState;
            });
        };
        _this.state = {
            numberOfFaces: 3,
            imagesFadeIn: true,
            personaSize: PersonaSize.size32
        };
        return _this;
    }
    FacepileBasicExample.prototype.render = function () {
        var _this = this;
        var _a = this.state, numberOfFaces = _a.numberOfFaces, personaSize = _a.personaSize;
        var facepileProps = {
            personaSize: personaSize,
            personas: facepilePersonas.slice(0, numberOfFaces),
            overflowPersonas: facepilePersonas.slice(numberOfFaces),
            getPersonaProps: function (persona) {
                return {
                    imageShouldFadeIn: _this.state.imagesFadeIn
                };
            },
            ariaDescription: 'To move through the items use left and right arrow keys.'
        };
        return (React.createElement("div", { className: 'ms-FacepileExample' },
            React.createElement(Facepile, tslib_1.__assign({}, facepileProps)),
            React.createElement("div", { className: 'control' },
                React.createElement(Slider, { label: "Number of Personas:", min: 1, max: 5, step: 1, showValue: true, value: numberOfFaces, onChange: this._onChangePersonaNumber }),
                React.createElement(Dropdown, { label: "Persona Size:", selectedKey: this.state.personaSize, options: [
                        { key: PersonaSize.size16, text: PersonaSize[PersonaSize.size16] },
                        { key: PersonaSize.size24, text: PersonaSize[PersonaSize.size24] },
                        { key: PersonaSize.size28, text: PersonaSize[PersonaSize.size28] },
                        { key: PersonaSize.size32, text: PersonaSize[PersonaSize.size32] },
                        { key: PersonaSize.size40, text: PersonaSize[PersonaSize.size40] }
                    ], onChanged: this._onChangePersonaSize }),
                React.createElement(Checkbox, { className: exampleStyles.exampleCheckbox, label: "Fade In", checked: this.state.imagesFadeIn, onChange: this._onChangeFadeIn }))));
    };
    return FacepileBasicExample;
}(React.Component));
export { FacepileBasicExample };
//# sourceMappingURL=Facepile.Basic.Example.js.map