define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "@uifabric/example-data", "@uifabric/experiments/lib/SelectedItemsList", "@uifabric/experiments/lib/FloatingPeopleSuggestions", "@uifabric/experiments/lib/FloatingSuggestions"], function (require, exports, tslib_1, React, Button_1, example_data_1, SelectedItemsList_1, FloatingPeopleSuggestions_1, FloatingSuggestions_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var SelectedPeopleListWithEditInContextMenuExample = /** @class */ (function (_super) {
        tslib_1.__extends(SelectedPeopleListWithEditInContextMenuExample, _super);
        function SelectedPeopleListWithEditInContextMenuExample(props) {
            var _this = _super.call(this, props) || this;
            // Used to resolve suggestions on the editableItem
            _this.model = new ExampleSuggestionsModel(example_data_1.people);
            _this.suggestionsStore = new FloatingSuggestions_1.SuggestionsStore();
            /**
             * Build a custom selected item capable of being edited with a dropdown and capable of editing
             */
            _this.EditableItemWithContextMenu = SelectedItemsList_1.EditableItem({
                editingItemComponent: SelectedItemsList_1.DefaultEditingItem({
                    getEditingItemText: function (persona) { return persona.text || ''; },
                    onRenderFloatingPicker: function (props) { return (React.createElement(FloatingPeopleSuggestions_1.FloatingPeopleSuggestions, tslib_1.__assign({}, props, { suggestionsStore: _this.suggestionsStore, onResolveSuggestions: _this.model.resolveSuggestions }))); },
                }),
                itemComponent: SelectedItemsList_1.ItemWithContextMenu({
                    menuItems: function (item, onTrigger) { return [
                        {
                            key: 'remove',
                            text: 'Remove',
                            onClick: function () {
                                _this._onItemsRemoved([item]);
                            },
                        },
                        {
                            key: 'copy',
                            text: 'Copy',
                            onClick: function () {
                                _this._copyToClipboard(_this._getCopyItemsText([item]));
                            },
                        },
                        {
                            key: 'edit',
                            text: 'Edit',
                            onClick: function () { return onTrigger && onTrigger(); },
                        },
                    ]; },
                    itemComponent: SelectedItemsList_1.TriggerOnContextMenu(SelectedItemsList_1.SelectedPersona),
                }),
            });
            _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._copyToClipboard = function (copyString) {
                navigator.clipboard.writeText(copyString).then(function () {
                    /* clipboard successfully set */
                }, function () {
                    /* clipboard write failed */
                    throw new Error();
                });
            };
            _this.state = {
                currentSelectedItems: [example_data_1.people[40]],
            };
            return _this;
        }
        SelectedPeopleListWithEditInContextMenuExample.prototype.render = function () {
            return (React.createElement("div", { className: 'ms-BasePicker-text' },
                "Right click any persona to open the context menu",
                React.createElement("br", null),
                React.createElement(Button_1.PrimaryButton, { text: "Add another item", onClick: this._onAddItemButtonClicked }),
                this._renderExtendedPicker()));
        };
        SelectedPeopleListWithEditInContextMenuExample.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.EditableItemWithContextMenu, onItemsRemoved: this._onItemsRemoved })));
        };
        SelectedPeopleListWithEditInContextMenuExample.prototype._getCopyItemsText = function (items) {
            var copyText = '';
            items.forEach(function (item, index) {
                copyText += item.text;
                if (index < items.length - 1) {
                    copyText += ', ';
                }
            });
            return copyText;
        };
        return SelectedPeopleListWithEditInContextMenuExample;
    }(React.Component));
    exports.SelectedPeopleListWithEditInContextMenuExample = SelectedPeopleListWithEditInContextMenuExample;
    var ExampleSuggestionsModel = /** @class */ (function () {
        function ExampleSuggestionsModel(data) {
            var _this = this;
            this.resolveSuggestions = function (filterText, currentItems) {
                var filteredItems = [];
                if (filterText) {
                    filteredItems = _this._filterItemsByText(filterText);
                    filteredItems = _this._removeDuplicates(filteredItems, currentItems || []);
                }
                return _this._convertResultsToPromise(filteredItems);
            };
            this.suggestionsData = tslib_1.__spreadArrays(data);
        }
        ExampleSuggestionsModel.prototype.removeSuggestion = function (item) {
            var index = this.suggestionsData.indexOf(item);
            console.log('removing', item, 'at', index);
            if (index !== -1) {
                this.suggestionsData.splice(index, 1);
            }
        };
        ExampleSuggestionsModel.prototype._filterItemsByText = function (filterText) {
            var _this = this;
            return this.suggestionsData.filter(function (item) {
                var itemText = item.text || item.name;
                return itemText ? _this._doesTextStartWith(itemText, filterText) : false;
            });
        };
        ExampleSuggestionsModel.prototype._doesTextStartWith = function (text, filterText) {
            return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
        };
        ExampleSuggestionsModel.prototype._removeDuplicates = function (items, possibleDupes) {
            var _this = this;
            return items.filter(function (item) { return !_this._listContainsItem(item, possibleDupes); });
        };
        ExampleSuggestionsModel.prototype._listContainsItem = function (item, Items) {
            if (!Items || !Items.length || Items.length === 0) {
                return false;
            }
            return Items.filter(function (i) { return (i.text || i.name) === (item.text || item.name); }).length > 0;
        };
        ExampleSuggestionsModel.prototype._convertResultsToPromise = function (results) {
            return new Promise(function (resolve) { return setTimeout(function () { return resolve(results); }, 150); });
        };
        return ExampleSuggestionsModel;
    }());
});
//# sourceMappingURL=SelectedPeopleList.WithEditInContextMenu.Example.js.map