"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Checkbox_1 = require("office-ui-fabric-react/lib/Checkbox");
var Dropdown_1 = require("office-ui-fabric-react/lib/Dropdown");
var Facepile_1 = require("office-ui-fabric-react/lib/Facepile");
var Persona_1 = require("office-ui-fabric-react/lib/Persona");
var Slider_1 = require("office-ui-fabric-react/lib/Slider");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var FacepileExampleData_1 = require("./FacepileExampleData");
require("./Facepile.Examples.scss");
var exampleStylesImport = require("../../../common/_exampleStyles.scss");
var exampleStyles = exampleStylesImport;
var ExtraDataType;
(function (ExtraDataType) {
    ExtraDataType[ExtraDataType["none"] = 0] = "none";
    ExtraDataType[ExtraDataType["name"] = 1] = "name";
})(ExtraDataType = exports.ExtraDataType || (exports.ExtraDataType = {}));
var FacepileBasicExample = (function (_super) {
    tslib_1.__extends(FacepileBasicExample, _super);
    function FacepileBasicExample() {
        var _this = _super.call(this) || this;
        _this.state = {
            numberOfFaces: 3,
            imagesFadeIn: true,
            extraDataType: ExtraDataType.none,
            personaSize: Persona_1.PersonaSize.extraSmall
        };
        return _this;
    }
    FacepileBasicExample.prototype.render = function () {
        var _this = this;
        var _a = this.state, extraDataType = _a.extraDataType, numberOfFaces = _a.numberOfFaces, personaSize = _a.personaSize;
        var facepileProps = {
            personaSize: personaSize,
            personas: FacepileExampleData_1.facepilePersonas.slice(0, numberOfFaces),
            getPersonaProps: function (persona) {
                if (extraDataType === ExtraDataType.name) {
                    return {
                        imageShouldFadeIn: _this.state.imagesFadeIn,
                        hidePersonaDetails: false
                    };
                }
                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_1.Facepile, tslib_1.__assign({}, facepileProps)),
            React.createElement("div", { className: 'control' },
                React.createElement(Slider_1.Slider, { label: 'Number of Personas:', min: 1, max: 5, step: 1, showValue: true, value: numberOfFaces, onChange: this._onChangePersonaNumber })),
            React.createElement(Checkbox_1.Checkbox, { className: exampleStyles.exampleCheckbox, label: 'Fade In', checked: this.state.imagesFadeIn, onChange: this._onChangeFadeIn }),
            React.createElement(Dropdown_1.Dropdown, { label: 'Persona Size:', selectedKey: this.state.personaSize, options: [
                    { key: Persona_1.PersonaSize.extraSmall, text: Persona_1.PersonaSize[Persona_1.PersonaSize.extraSmall] },
                    { key: Persona_1.PersonaSize.extraExtraSmall, text: Persona_1.PersonaSize[Persona_1.PersonaSize.extraExtraSmall] }
                ], onChanged: this._onChangePersonaSize }),
            React.createElement(Dropdown_1.Dropdown, { label: 'Additional Data:', selectedKey: this.state.extraDataType, options: [
                    { key: ExtraDataType.none, text: ExtraDataType[ExtraDataType.none] },
                    { key: ExtraDataType.name, text: ExtraDataType[ExtraDataType.name] }
                ], onChanged: this._onChangeAddtlData })));
    };
    FacepileBasicExample.prototype._onChangeAddtlData = function (value) {
        this.setState(function (prevState) {
            prevState.extraDataType = value.key;
            return prevState;
        });
    };
    FacepileBasicExample.prototype._onChangeFadeIn = function (ev, checked) {
        this.setState(function (prevState) {
            prevState.imagesFadeIn = checked;
            return prevState;
        });
    };
    FacepileBasicExample.prototype._onChangePersonaNumber = function (value) {
        this.setState(function (prevState) {
            prevState.numberOfFaces = value;
            return prevState;
        });
    };
    FacepileBasicExample.prototype._onChangePersonaSize = function (value) {
        this.setState(function (prevState) {
            prevState.personaSize = value.key;
            return prevState;
        });
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], FacepileBasicExample.prototype, "_onChangeAddtlData", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], FacepileBasicExample.prototype, "_onChangeFadeIn", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], FacepileBasicExample.prototype, "_onChangePersonaNumber", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], FacepileBasicExample.prototype, "_onChangePersonaSize", null);
    return FacepileBasicExample;
}(React.Component));
exports.FacepileBasicExample = FacepileBasicExample;
//# sourceMappingURL=Facepile.Basic.Example.js.map