import { __assign, __extends, __spreadArrays } from "tslib";
import * as React from 'react';
import { PrimaryButton } from '@fluentui/react/lib/Button';
import { people } from '@fluentui/example-data';
import { SelectedPeopleList } from '@fluentui/react-experiments/lib/SelectedItemsList';
var SelectedPeopleListBasicExample = /** @class */ (function (_super) {
    __extends(SelectedPeopleListBasicExample, _super);
    function SelectedPeopleListBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this.addMultipleKey = 50;
        _this._onAddItemButtonClicked = function () {
            if (!_this.index) {
                _this.index = 0;
            }
            _this.setState({ currentSelectedItems: __spreadArrays(_this.state.currentSelectedItems, [people[_this.index]]) });
            _this.index++;
        };
        _this._addMoreItems = function () {
            var moreItems = people.map(function (obj) {
                return __assign(__assign({}, obj), { key: ++_this.addMultipleKey });
            });
            _this.setState({ currentSelectedItems: __spreadArrays(_this.state.currentSelectedItems, moreItems) });
        };
        _this._onItemsRemoved = function (items) {
            var currentSelectedItemsCopy = __spreadArrays(_this.state.currentSelectedItems);
            items.forEach(function (item) {
                var indexToRemove = currentSelectedItemsCopy.indexOf(item);
                currentSelectedItemsCopy.splice(indexToRemove, 1);
                _this.setState({ currentSelectedItems: __spreadArrays(currentSelectedItemsCopy) });
            });
        };
        _this.state = {
            currentSelectedItems: [people[40]],
        };
        return _this;
    }
    SelectedPeopleListBasicExample.prototype.render = function () {
        return (React.createElement("div", { className: 'ms-BasePicker-text' },
            React.createElement(PrimaryButton, { text: "Add another item", onClick: this._onAddItemButtonClicked }),
            React.createElement(PrimaryButton, { text: "Add multiple items", onClick: this._addMoreItems }),
            this._renderExtendedPicker()));
    };
    SelectedPeopleListBasicExample.prototype._renderExtendedPicker = function () {
        return (React.createElement("div", null,
            React.createElement(SelectedPeopleList, { key: 'normal', removeButtonAriaLabel: 'Remove', selectedItems: __spreadArrays(this.state.currentSelectedItems), onItemsRemoved: this._onItemsRemoved })));
    };
    return SelectedPeopleListBasicExample;
}(React.Component));
export { SelectedPeopleListBasicExample };
//# sourceMappingURL=SelectedPeopleList.Basic.Example.js.map