"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable */
var React = require("react");
/* tslint:enable */
var Button_1 = require("office-ui-fabric-react/lib/Button");
var ExtendedPicker_1 = require("../../ExtendedPicker");
require("office-ui-fabric-react/lib/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.scss");
var SelectedPeopleList_1 = require("../SelectedPeopleList/SelectedPeopleList");
var ExtendedSelectedItem_1 = require("../SelectedPeopleList/Items/ExtendedSelectedItem");
var Selection_1 = require("office-ui-fabric-react/lib/Selection");
var Toggle_1 = require("office-ui-fabric-react/lib/Toggle");
var stylesImport = require("./SelectedPeopleList.Basic.Example.scss");
var styles = stylesImport;
var PeopleSelectedItemsListExample = /** @class */ (function (_super) {
    tslib_1.__extends(PeopleSelectedItemsListExample, _super);
    function PeopleSelectedItemsListExample(props) {
        var _this = _super.call(this, props) || this;
        _this.selection = new Selection_1.Selection({ onSelectionChanged: function () { return _this._onSelectionChange(); } });
        _this._toggleControlledComponent = function (toggleState) {
            _this.setState({ controlledComponent: toggleState });
        };
        _this._onRenderItem = function (props) {
            return React.createElement(ExtendedSelectedItem_1.ExtendedSelectedItem, tslib_1.__assign({}, props));
        };
        _this._setComponentRef = function (component) {
            _this._selectionList = component;
        };
        _this._onAddItemButtonClicked = function () {
            if (_this._selectionList) {
                if (!_this.index) {
                    _this.index = 0;
                }
                if (_this.state.controlledComponent) {
                    _this.setState({ currentSelectedItems: _this.state.currentSelectedItems.concat([ExtendedPicker_1.people[_this.index]]) });
                }
                else {
                    _this._selectionList.addItems([ExtendedPicker_1.people[_this.index]]);
                }
                _this.index++;
            }
        };
        _this._onItemDeleted = function (item) {
            var indexToRemove = _this.state.currentSelectedItems.indexOf(item);
            _this.setState({
                currentSelectedItems: _this.state.currentSelectedItems
                    .slice(0, indexToRemove)
                    .concat(_this.state.currentSelectedItems.slice(indexToRemove + 1))
            });
        };
        _this._onExpandItem = function (item) {
            if (_this.state.controlledComponent) {
                var indexToExpand = _this.state.currentSelectedItems.indexOf(item);
                _this.setState({
                    currentSelectedItems: _this.state.currentSelectedItems
                        .slice(0, indexToExpand)
                        .concat(_this._getExpandedGroupItems(item))
                        .concat(_this.state.currentSelectedItems.slice(indexToExpand + 1))
                });
            }
            else {
                _this._selectionList.replaceItem(item, _this._getExpandedGroupItems(item));
            }
        };
        _this.state = {
            controlledComponent: false,
            currentSelectedItems: [ExtendedPicker_1.people[40]]
        };
        return _this;
    }
    PeopleSelectedItemsListExample.prototype.render = function () {
        return (React.createElement("div", { className: 'ms-BasePicker-text' },
            React.createElement(Toggle_1.Toggle, { label: "Controlled component", defaultChecked: false, onChanged: this._toggleControlledComponent }),
            React.createElement(Button_1.PrimaryButton, { text: "Add another item", onClick: this._onAddItemButtonClicked }),
            this._renderExtendedPicker()));
    };
    PeopleSelectedItemsListExample.prototype._renderExtendedPicker = function () {
        return (React.createElement("div", { className: styles.container },
            React.createElement(SelectedPeopleList_1.SelectedPeopleList, { key: 'normal', removeButtonAriaLabel: 'Remove', defaultSelectedItems: [ExtendedPicker_1.people[40]], selectedItems: this.state.controlledComponent ? this.state.currentSelectedItems : undefined, componentRef: this._setComponentRef, onCopyItems: this._onCopyItems, onExpandGroup: this._onExpandItem, copyMenuItemText: 'Copy', removeMenuItemText: 'Remove', selection: this.selection, onRenderItem: this._onRenderItem, onItemDeleted: this.state.controlledComponent ? this._onItemDeleted : undefined })));
    };
    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 ExtendedPicker_1.groupOne;
            case 'Group Two':
                return ExtendedPicker_1.groupTwo;
            default:
                return [];
        }
    };
    return PeopleSelectedItemsListExample;
}(React.Component));
exports.PeopleSelectedItemsListExample = PeopleSelectedItemsListExample;
//# sourceMappingURL=SelectedPeopleList.Basic.Example.js.map