"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var CommandBar_1 = require("office-ui-fabric-react/lib/CommandBar");
var Toggle_1 = require("office-ui-fabric-react/lib/Toggle");
var CommandBarBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(CommandBarBasicExample, _super);
    function CommandBarBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isSearchBoxVisible: true,
            areNamesVisible: true,
            areIconsVisible: true
        };
        return _this;
    }
    CommandBarBasicExample.prototype.render = function () {
        var _this = this;
        var _a = this.props, items = _a.items, overflowItems = _a.overflowItems, farItems = _a.farItems;
        var _b = this.state, searchBoxVisible = _b.isSearchBoxVisible, iconsVisible = _b.areIconsVisible, namesVisible = _b.areNamesVisible;
        var filteredItems = items.map(function (item) { return Utilities_1.assign({}, item, {
            name: namesVisible ? item.name : '',
            icon: iconsVisible ? item.icon : ''
        }); });
        var filteredOverflowItems = overflowItems.map(function (item) { return Utilities_1.assign({}, item, {
            name: namesVisible ? item.name : '',
            icon: iconsVisible ? item.icon : ''
        }); });
        var filteredFarItems = farItems.map(function (item) { return Utilities_1.assign({}, item, {
            name: namesVisible ? item.name : '',
            icon: iconsVisible ? item.icon : ''
        }); });
        return (React.createElement("div", null,
            React.createElement(Toggle_1.Toggle, { label: 'Show search box', checked: searchBoxVisible, 
                // tslint:disable-next-line:jsx-no-lambda
                onChanged: function (isSearchBoxVisible) { return _this.setState({ isSearchBoxVisible: isSearchBoxVisible }); }, onText: 'Visible', offText: 'Hidden' }),
            React.createElement(Toggle_1.Toggle, { label: 'Show names', checked: namesVisible, 
                // tslint:disable-next-line:jsx-no-lambda
                onChanged: function (areNamesVisible) { return _this.setState({ areNamesVisible: areNamesVisible }); }, onText: 'Visible', offText: 'Hidden' }),
            React.createElement(Toggle_1.Toggle, { label: 'Show icons', checked: iconsVisible, 
                // tslint:disable-next-line:jsx-no-lambda
                onChanged: function (areIconsVisible) { return _this.setState({ areIconsVisible: areIconsVisible }); }, onText: 'Visible', offText: 'Hidden' }),
            React.createElement(CommandBar_1.CommandBar, { isSearchBoxVisible: searchBoxVisible, searchPlaceholderText: 'Search...', elipisisAriaLabel: 'More options', items: filteredItems, overflowItems: filteredOverflowItems, farItems: filteredFarItems })));
    };
    return CommandBarBasicExample;
}(React.Component));
exports.CommandBarBasicExample = CommandBarBasicExample;
//# sourceMappingURL=CommandBar.Basic.Example.js.map