import * as tslib_1 from "tslib";
/* tslint:disable */
import * as React from 'react';
/* tslint:enable */
import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { people, groupOne, groupTwo } from '../../ExtendedPicker';
import 'office-ui-fabric-react/lib/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.scss';
import { SelectedPeopleList } from '../SelectedPeopleList/SelectedPeopleList';
import { ExtendedSelectedItem } from '../SelectedPeopleList/Items/ExtendedSelectedItem';
import { Selection } from 'office-ui-fabric-react/lib/Selection';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import * as styles from './SelectedPeopleList.Basic.Example.scss';
var PeopleSelectedItemsListExample = /** @class */ (function (_super) {
    tslib_1.__extends(PeopleSelectedItemsListExample, _super);
    function PeopleSelectedItemsListExample() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.selection = new Selection({ onSelectionChanged: function () { return _this._onSelectionChange(); } });
        _this._onRenderItem = function (props) {
            return React.createElement(ExtendedSelectedItem, tslib_1.__assign({}, props, { renderPersonaCoin: _this._renderPersonaElement }));
        };
        _this._setComponentRef = function (component) {
            _this._selectionList = component;
        };
        _this._onAddItemButtonClicked = function () {
            if (_this._selectionList) {
                if (!_this.index) {
                    _this.index = 0;
                }
                _this._selectionList.addItems([people[_this.index]]);
                _this.index++;
            }
        };
        _this._onExpandItem = function (item) {
            // tslint:disable-next-line:no-any
            _this._selectionList.replaceItem(item, _this._getExpandedGroupItems(item));
        };
        return _this;
    }
    PeopleSelectedItemsListExample.prototype.render = function () {
        return (React.createElement("div", { className: 'ms-BasePicker-text' },
            React.createElement(PrimaryButton, { text: "Add another item", onClick: this._onAddItemButtonClicked }),
            this._renderExtendedPicker()));
    };
    PeopleSelectedItemsListExample.prototype._renderExtendedPicker = function () {
        return (React.createElement(SelectedPeopleList, { className: 'ms-PeoplePicker', key: 'normal', removeButtonAriaLabel: 'Remove', defaultSelectedItems: [people[40]], componentRef: this._setComponentRef, onCopyItems: this._onCopyItems, onExpandGroup: this._onExpandItem, copyMenuItemText: 'Copy', removeMenuItemText: 'Remove', selection: this.selection, onRenderItem: this._onRenderItem }));
    };
    PeopleSelectedItemsListExample.prototype._renderPersonaElement = function (props, defaultRender) {
        return React.createElement(Icon, { iconName: 'Contact', className: styles.persona });
    };
    PeopleSelectedItemsListExample.prototype._onSelectionChange = function () {
        this.forceUpdate();
    };
    PeopleSelectedItemsListExample.prototype._onCopyItems = function (items) {
        var copyText = '';
        items.forEach(function (item, index) {
            copyText += item.text;
            if (index < items.length - 1) {
                copyText += ', ';
            }
        });
        return copyText;
    };
    PeopleSelectedItemsListExample.prototype._getExpandedGroupItems = function (item) {
        switch (item.text) {
            case 'Group One':
                return groupOne;
            case 'Group Two':
                return groupTwo;
            default:
                return [];
        }
    };
    return PeopleSelectedItemsListExample;
}(BaseComponent));
export { PeopleSelectedItemsListExample };
//# sourceMappingURL=SelectedPeopleList.Basic.Example.js.map