define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "@uifabric/example-data", "@uifabric/experiments/lib/SelectedItemsList"], function (require, exports, tslib_1, React, Button_1, example_data_1, SelectedItemsList_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var SelectedPeopleListWithGroupExpandExample = /** @class */ (function (_super) {
        tslib_1.__extends(SelectedPeopleListWithGroupExpandExample, _super);
        function SelectedPeopleListWithGroupExpandExample(props) {
            var _this = _super.call(this, props) || this;
            /**
             * Build a custom selected item capable of being edited with a dropdown and
             * capable of eidting
             */
            // eslint-disable-next-line @typescript-eslint/naming-convention
            _this.SelectedItem = function (props) { return (React.createElement(SelectedItemsList_1.SelectedPersona, tslib_1.__assign({ canExpand: _this._canExpandItem, getExpandedItems: _this._getExpandedGroupItems }, props))); };
            _this._onAddItemButtonClicked = function () {
                var randomPerson = example_data_1.people[Math.floor(Math.random() * (example_data_1.people.length - 1))];
                _this.setState({ currentSelectedItems: tslib_1.__spreadArrays(_this.state.currentSelectedItems, [randomPerson]) });
            };
            _this._onItemsRemoved = function (items) {
                var currentSelectedItemsCopy = tslib_1.__spreadArrays(_this.state.currentSelectedItems);
                items.forEach(function (item) {
                    var indexToRemove = currentSelectedItemsCopy.indexOf(item);
                    currentSelectedItemsCopy.splice(indexToRemove, 1);
                    _this.setState({ currentSelectedItems: tslib_1.__spreadArrays(currentSelectedItemsCopy) });
                });
            };
            _this.state = {
                currentSelectedItems: [example_data_1.people[40]],
            };
            return _this;
        }
        SelectedPeopleListWithGroupExpandExample.prototype.render = function () {
            return (React.createElement("div", { className: 'ms-BasePicker-text' },
                "Click the '+' icon to the left of the group to expand it into a number of personas",
                React.createElement("br", null),
                React.createElement(Button_1.PrimaryButton, { text: "Add another item", onClick: this._onAddItemButtonClicked }),
                this._renderExtendedPicker()));
        };
        SelectedPeopleListWithGroupExpandExample.prototype._renderExtendedPicker = function () {
            return (React.createElement("div", null,
                React.createElement(SelectedItemsList_1.SelectedPeopleList, { key: 'normal', removeButtonAriaLabel: 'Remove', selectedItems: tslib_1.__spreadArrays(this.state.currentSelectedItems), onRenderItem: this.SelectedItem, onItemsRemoved: this._onItemsRemoved })));
        };
        SelectedPeopleListWithGroupExpandExample.prototype._getExpandedGroupItems = function (item) {
            switch (item.text) {
                case 'Group One':
                    return example_data_1.groupOne;
                case 'Group Two':
                    return example_data_1.groupTwo;
                default:
                    return [];
            }
        };
        SelectedPeopleListWithGroupExpandExample.prototype._canExpandItem = function (item) {
            return item.text !== undefined && item.text.indexOf('Group') !== -1;
        };
        return SelectedPeopleListWithGroupExpandExample;
    }(React.Component));
    exports.SelectedPeopleListWithGroupExpandExample = SelectedPeopleListWithGroupExpandExample;
});
//# sourceMappingURL=SelectedPeopleList.WithGroupExpand.Example.js.map