define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "@uifabric/example-data", "@uifabric/experiments/lib/SelectedItemsList", "@uifabric/experiments/lib/FloatingPeopleSuggestionsComposite"], function (require, exports, tslib_1, React, Button_1, example_data_1, SelectedItemsList_1, FloatingPeopleSuggestionsComposite_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.SelectedPeopleListWithEditInContextMenuExample = function () {
        var _a = React.useState([example_data_1.people[40]]), currentSelectedItems = _a[0], setCurrentSelectedItems = _a[1];
        var _b = React.useState(-1), editingIndex = _b[0], setEditingIndex = _b[1];
        var _startsWith = function (text, filterText) {
            return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
        };
        var _getSuggestions = function (value) {
            var allPeople = example_data_1.people;
            var suggestions = allPeople.filter(function (item) { return _startsWith(item.text || '', value); });
            var suggestionList = suggestions.map(function (item) {
                return { item: item, isSelected: false, key: item.key };
            });
            return suggestionList;
        };
        /**
         * Build a custom selected item capable of being edited with a dropdown and capable of editing
         */
        var EditableItemWithContextMenu = SelectedItemsList_1.EditableItem({
            editingItemComponent: SelectedItemsList_1.DefaultEditingItem({
                getEditingItemText: function (persona) { return persona.text || ''; },
                onRenderFloatingPicker: function (props) { return (React.createElement(FloatingPeopleSuggestionsComposite_1.FloatingPeopleSuggestions, tslib_1.__assign({}, props, { isSuggestionsVisible: true }))); },
                getSuggestions: _getSuggestions,
            }),
            itemComponent: SelectedItemsList_1.ItemWithContextMenu({
                menuItems: function (item, onTrigger) { return [
                    {
                        key: 'remove',
                        text: 'Remove',
                        onClick: function () {
                            _onItemsRemoved([item]);
                        },
                    },
                    {
                        key: 'copy',
                        text: 'Copy',
                        onClick: function () {
                            _copyToClipboard(_getCopyItemsText([item]));
                        },
                    },
                    {
                        key: 'edit',
                        text: 'Edit',
                        onClick: function () { return onTrigger && onTrigger(); },
                    },
                ]; },
                itemComponent: SelectedItemsList_1.TriggerOnContextMenu(SelectedItemsList_1.SelectedPersona),
            }),
            getIsEditing: function (item, index) { return index === editingIndex; },
            onEditingStarted: function (item, index) { return setEditingIndex(index); },
            onEditingCompleted: function () { return setEditingIndex(-1); },
        });
        var _onAddItemButtonClicked = React.useCallback(function () {
            var randomPerson = example_data_1.people[Math.floor(Math.random() * (example_data_1.people.length - 1))];
            setCurrentSelectedItems(tslib_1.__spreadArrays(currentSelectedItems, [randomPerson]));
        }, [currentSelectedItems]);
        var _onItemsRemoved = React.useCallback(function (items) {
            var currentSelectedItemsCopy = tslib_1.__spreadArrays(currentSelectedItems);
            items.forEach(function (item) {
                var indexToRemove = currentSelectedItemsCopy.indexOf(item);
                currentSelectedItemsCopy.splice(indexToRemove, 1);
                setCurrentSelectedItems(tslib_1.__spreadArrays(currentSelectedItemsCopy));
            });
        }, [currentSelectedItems]);
        var _replaceItem = React.useCallback(function (newItem, index) {
            var newItemsArray = !Array.isArray(newItem) ? [newItem] : newItem;
            if (index >= 0) {
                var newItems = tslib_1.__spreadArrays(currentSelectedItems);
                newItems.splice.apply(newItems, tslib_1.__spreadArrays([index, 1], newItemsArray));
                setCurrentSelectedItems(newItems);
            }
        }, [currentSelectedItems]);
        var _copyToClipboard = function (copyString) {
            navigator.clipboard.writeText(copyString).then(function () {
                /* clipboard successfully set */
            }, function () {
                /* clipboard write failed */
                throw new Error();
            });
        };
        var _getCopyItemsText = function (items) {
            var copyText = '';
            items.forEach(function (item, index) {
                copyText += item.text;
                if (index < items.length - 1) {
                    copyText += ', ';
                }
            });
            return copyText;
        };
        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: _onAddItemButtonClicked }),
            React.createElement("div", null,
                React.createElement(SelectedItemsList_1.SelectedPeopleList, { key: 'normal', removeButtonAriaLabel: 'Remove', selectedItems: currentSelectedItems, onRenderItem: EditableItemWithContextMenu, onItemsRemoved: _onItemsRemoved, replaceItem: _replaceItem }))));
    };
});
//# sourceMappingURL=SelectedPeopleList.WithEditInContextMenu.Example.js.map