import { __assign, __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, EditableItem, DefaultEditingItem, } from '@uifabric/experiments/lib/SelectedItemsList';
import { FloatingPeopleSuggestions, } from '@uifabric/experiments/lib/FloatingPeopleSuggestionsComposite';
export var SelectedPeopleListWithEditExample = function () {
    var _a = React.useState([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 = 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 when the item is right clicked
     */
    var SelectedItem = EditableItem({
        itemComponent: TriggerOnContextMenu(SelectedPersona),
        editingItemComponent: DefaultEditingItem({
            getEditingItemText: function (persona) { return persona.text || ''; },
            getSuggestions: _getSuggestions,
            onRenderFloatingPicker: function (props) { return (React.createElement(FloatingPeopleSuggestions, __assign({}, props, { isSuggestionsVisible: true }))); },
        }),
        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 = people[Math.floor(Math.random() * (people.length - 1))];
        setCurrentSelectedItems(__spreadArrays(currentSelectedItems, [randomPerson]));
    }, [currentSelectedItems]);
    var _onItemsRemoved = React.useCallback(function (items) {
        var currentSelectedItemsCopy = __spreadArrays(currentSelectedItems);
        items.forEach(function (item) {
            var indexToRemove = currentSelectedItemsCopy.indexOf(item);
            currentSelectedItemsCopy.splice(indexToRemove, 1);
            setCurrentSelectedItems(__spreadArrays(currentSelectedItemsCopy));
        });
    }, [currentSelectedItems]);
    var _replaceItem = React.useCallback(function (newItem, index) {
        var newItemsArray = !Array.isArray(newItem) ? [newItem] : newItem;
        if (index >= 0) {
            var newItems = __spreadArrays(currentSelectedItems);
            newItems.splice.apply(newItems, __spreadArrays([index, 1], newItemsArray));
            setCurrentSelectedItems(newItems);
        }
    }, [currentSelectedItems]);
    return (React.createElement("div", { className: 'ms-BasePicker-text' },
        "Right click any persona to edit it",
        React.createElement("br", null),
        React.createElement(PrimaryButton, { text: "Add another item", onClick: _onAddItemButtonClicked }),
        React.createElement("div", null,
            React.createElement(SelectedPeopleList, { key: 'normal', removeButtonAriaLabel: 'Remove', selectedItems: currentSelectedItems, onRenderItem: SelectedItem, onItemsRemoved: _onItemsRemoved, replaceItem: _replaceItem }))));
};
//# sourceMappingURL=SelectedPeopleList.WithEdit.Example.js.map