import { __assign, __extends, __spreadArrays } from "tslib";
import * as React from 'react';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { people } from '@uifabric/example-data';
import { SelectedPeopleList, SelectedPersona, TriggerOnContextMenu, ItemWithContextMenu, EditableItem, DefaultEditingItem, } from '@uifabric/experiments/lib/SelectedItemsList';
import { FloatingPeopleSuggestions } from '@uifabric/experiments/lib/FloatingPeopleSuggestions';
import { SuggestionsStore } from '@uifabric/experiments/lib/FloatingSuggestions';
var SelectedPeopleListWithEditInContextMenuExample = /** @class */ (function (_super) {
    __extends(SelectedPeopleListWithEditInContextMenuExample, _super);
    function SelectedPeopleListWithEditInContextMenuExample(props) {
        var _this = _super.call(this, props) || this;
        // Used to resolve suggestions on the editableItem
        _this.model = new ExampleSuggestionsModel(people);
        _this.suggestionsStore = new SuggestionsStore();
        /**
         * Build a custom selected item capable of being edited with a dropdown and capable of editing
         */
        _this.EditableItemWithContextMenu = EditableItem({
            editingItemComponent: DefaultEditingItem({
                getEditingItemText: function (persona) { return persona.text || ''; },
                onRenderFloatingPicker: function (props) { return (React.createElement(FloatingPeopleSuggestions, __assign({}, props, { suggestionsStore: _this.suggestionsStore, onResolveSuggestions: _this.model.resolveSuggestions }))); },
            }),
            itemComponent: 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: TriggerOnContextMenu(SelectedPersona),
            }),
        });
        _this._onAddItemButtonClicked = function () {
            var randomPerson = people[Math.floor(Math.random() * (people.length - 1))];
            _this.setState({ currentSelectedItems: __spreadArrays(_this.state.currentSelectedItems, [randomPerson]) });
        };
        _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._copyToClipboard = function (copyString) {
            navigator.clipboard.writeText(copyString).then(function () {
                /* clipboard successfully set */
            }, function () {
                /* clipboard write failed */
                throw new Error();
            });
        };
        _this.state = {
            currentSelectedItems: [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(PrimaryButton, { text: "Add another item", onClick: this._onAddItemButtonClicked }),
            this._renderExtendedPicker()));
    };
    SelectedPeopleListWithEditInContextMenuExample.prototype._renderExtendedPicker = function () {
        return (React.createElement("div", null,
            React.createElement(SelectedPeopleList, { key: 'normal', removeButtonAriaLabel: 'Remove', selectedItems: __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));
export { 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 = __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