define(["require", "exports", "tslib", "react", "@fluentui/react-experiments/lib/UnifiedPeoplePicker", "@fluentui/example-data", "@fluentui/react-hooks", "@fluentui/react-experiments/lib/SelectedItemsList"], function (require, exports, tslib_1, React, UnifiedPeoplePicker_1, example_data_1, react_hooks_1, SelectedItemsList_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.UnifiedPeoplePickerExample = void 0;
    var _suggestions = [
        {
            key: '1',
            id: '1',
            displayText: 'Suggestion 1',
            item: example_data_1.mru[0],
            isSelected: true,
            showRemoveButton: true,
        },
        {
            key: '2',
            id: '2',
            displayText: 'Suggestion 2',
            item: example_data_1.mru[1],
            isSelected: false,
            showRemoveButton: true,
        },
        {
            key: '3',
            id: '3',
            displayText: 'Suggestion 3',
            item: example_data_1.mru[2],
            isSelected: false,
            showRemoveButton: true,
        },
        {
            key: '4',
            id: '4',
            displayText: 'Suggestion 4',
            item: example_data_1.mru[3],
            isSelected: false,
            showRemoveButton: true,
        },
        {
            key: '5',
            id: '5',
            displayText: 'Suggestion 5',
            item: example_data_1.mru[4],
            isSelected: false,
            showRemoveButton: true,
        },
        {
            key: '6',
            id: '6',
            displayText: 'Suggestion 6',
            item: example_data_1.people[5],
            isSelected: false,
            showRemoveButton: true,
        },
        {
            key: '7',
            id: '7',
            displayText: 'Suggestion 7',
            item: example_data_1.people[6],
            isSelected: false,
            showRemoveButton: true,
        },
    ];
    var UnifiedPeoplePickerExample = function () {
        var _a = React.useState(tslib_1.__spreadArrays(_suggestions)), peopleSuggestions = _a[0], setPeopleSuggestions = _a[1];
        var _b = React.useState([example_data_1.people[40]]), peopleSelectedItems = _b[0], setPeopleSelectedItems = _b[1];
        var ref = React.useRef();
        var suggestionProps = react_hooks_1.useConst(function () {
            return {
                // uncomment below section to see any example of a selectable header item
                /*headerItemsProps: [
                  {
                    renderItem: () => {
                      return <>People Suggestions</>;
                    },
                    shouldShow: () => {
                      return peopleSuggestions.length > 0;
                    },
                    onExecute: () => {
                      alert('People suggestions selected');
                    },
                  },
                ],*/
                footerItemsProps: [
                    {
                        renderItem: function () {
                            return React.createElement(React.Fragment, null,
                                "Showing ",
                                peopleSuggestions.length,
                                " results");
                        },
                        shouldShow: function () {
                            return peopleSuggestions.length > 0;
                        },
                    },
                    {
                        renderItem: function () {
                            return React.createElement(React.Fragment, null, "Select to log out to console");
                        },
                        shouldShow: function () {
                            return peopleSuggestions.length > 0;
                        },
                        onExecute: function () {
                            console.log(peopleSuggestions);
                        },
                    },
                ],
            };
        });
        var _onSuggestionSelected = function (ev, item) {
            _markSuggestionSelected(item);
            setPeopleSelectedItems(function (prevPeopleSelectedItems) { return tslib_1.__spreadArrays(prevPeopleSelectedItems, [item.item]); });
        };
        var _onSuggestionRemoved = function (ev, suggestionToRemove) {
            // Intentionally checking on complete item object to ensure it is removed. Id cannot be used as the
            // property is not populated for all the suggestions, and key does not exist on type checking.
            setPeopleSuggestions(function (suggestions) {
                var modifiedSuggestions = suggestions.filter(function (suggestion) { return suggestion.item !== suggestionToRemove.item; });
                return modifiedSuggestions;
            });
        };
        var _markSuggestionSelected = function (selectedSuggestion) {
            setPeopleSuggestions(function (suggestions) {
                var modifiedSuggestions = suggestions.map(function (suggestion) {
                    return suggestion.id === selectedSuggestion.id
                        ? tslib_1.__assign(tslib_1.__assign({}, suggestion), { isSelected: true }) : tslib_1.__assign(tslib_1.__assign({}, suggestion), { isSelected: false });
                });
                return modifiedSuggestions;
            });
        };
        var _getItemsCopyText = function (itemsToCopy) {
            var copyText = '';
            if (itemsToCopy && itemsToCopy.length > 0) {
                itemsToCopy.forEach(function (item) {
                    copyText = copyText.concat((item.text || '') + ',');
                });
            }
            return copyText;
        };
        var _onPaste = function (pastedValue, selectedItemsList) {
            // Find the suggestion corresponding to the specific text name
            // and update the selectedItemsList to re-render everything.
            var newList = [];
            if (pastedValue !== null) {
                pastedValue.split(',').forEach(function (textValue) {
                    if (textValue) {
                        example_data_1.people.forEach(function (suggestionItem) {
                            if (suggestionItem.text === textValue) {
                                selectedItemsList.push(suggestionItem);
                                newList.push(suggestionItem);
                            }
                        });
                    }
                });
            }
            setPeopleSelectedItems(function (prevPeopleSelectedItems) { return tslib_1.__spreadArrays(prevPeopleSelectedItems, newList); });
        };
        var _dropItemsAt = function (insertIndex, newItems, indicesToRemove) {
            // Insert those items into the current list
            if (insertIndex > -1) {
                var currentItems = tslib_1.__spreadArrays(peopleSelectedItems);
                var updatedItems_1 = [];
                for (var i = 0; i < currentItems.length; i++) {
                    var item = currentItems[i];
                    // If this is the insert before index, insert the dragged items, then the current item
                    if (i === insertIndex) {
                        newItems.forEach(function (draggedItem) {
                            updatedItems_1.push(draggedItem);
                        });
                        updatedItems_1.push(item);
                    }
                    else if (!indicesToRemove.includes(i)) {
                        // only insert items into the new list that are not being dragged
                        updatedItems_1.push(item);
                    }
                }
                setPeopleSelectedItems(updatedItems_1);
            }
        };
        var _onItemsRemoved = function (itemsToRemove) {
            // Updating the local copy as well at the parent level.
            var currentItems = tslib_1.__spreadArrays(peopleSelectedItems);
            var updatedItems = currentItems;
            // Intentionally not using .filter here as we want to only remove a specific
            // item in case of duplicates of same item.
            itemsToRemove.forEach(function (item) {
                var index = updatedItems.indexOf(item);
                updatedItems.splice(index, 1);
            });
            setPeopleSelectedItems(updatedItems);
        };
        var _onInputChange = function (filterText) {
            var _a;
            // Clear the input if the user types a semicolon or comma
            // This is meant to be an example of using the forward ref,
            // feel free to comment out if it impacts your testing
            var lastCharIndex = filterText.length - 1;
            var lastChar = filterText[lastCharIndex];
            if (lastChar === ';' || lastChar === ',') {
                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.clearInput();
            }
            var allPeople = example_data_1.people;
            var suggestions = allPeople.filter(function (item) { return _startsWith(item.text || '', filterText); });
            var suggestionList = suggestions.map(function (item) {
                return { item: item, isSelected: false, key: item.key };
            });
            // We want to show top 5 results
            setPeopleSuggestions(suggestionList.splice(0, 5));
        };
        function _startsWith(text, filterText) {
            return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
        }
        var _replaceItem = function (newItem, index) {
            var newItemsArray = !Array.isArray(newItem) ? [newItem] : newItem;
            if (index >= 0) {
                var newItems = tslib_1.__spreadArrays(peopleSelectedItems);
                newItems.splice.apply(newItems, tslib_1.__spreadArrays([index, 1], newItemsArray));
                setPeopleSelectedItems(newItems);
            }
        };
        /**
         * Build a custom selected item capable of being edited with a dropdown and
         * capable of editing
         */
        var SelectedItem = function (props) { return (React.createElement(SelectedItemsList_1.SelectedPersona, tslib_1.__assign({ canExpand: _canExpandItem, getExpandedItems: _getExpandedGroupItems }, props))); };
        var _getExpandedGroupItems = function (item) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
            return tslib_1.__generator(this, function (_a) {
                switch (item.text) {
                    case 'Group One':
                        return [2 /*return*/, example_data_1.groupOne];
                    case 'Group Two':
                        return [2 /*return*/, example_data_1.groupTwo];
                    default:
                        return [2 /*return*/, []];
                }
                return [2 /*return*/];
            });
        }); };
        var _canExpandItem = function (item) {
            return item.text !== undefined && item.text.indexOf('Group') !== -1;
        };
        var floatingPeoplePickerProps = {
            suggestions: tslib_1.__spreadArrays(peopleSuggestions),
            isSuggestionsVisible: false,
            targetElement: null,
            onSuggestionSelected: _onSuggestionSelected,
            onRemoveSuggestion: _onSuggestionRemoved,
            suggestionsHeaderText: 'People suggestions',
            noResultsFoundText: 'No suggestions',
            onFloatingSuggestionsDismiss: undefined,
            showSuggestionRemoveButton: true,
            pickerWidth: '300px',
            pickerSuggestionsProps: suggestionProps,
        };
        var selectedPeopleListProps = {
            selectedItems: tslib_1.__spreadArrays(peopleSelectedItems),
            onRenderItem: SelectedItem,
            removeButtonAriaLabel: 'Remove',
            onItemsRemoved: _onItemsRemoved,
            getItemCopyText: _getItemsCopyText,
            dropItemsAt: _dropItemsAt,
            replaceItem: _replaceItem,
        };
        var inputProps = {
            'aria-label': 'Add people',
        };
        return (React.createElement(React.Fragment, null,
            React.createElement(UnifiedPeoplePicker_1.UnifiedPeoplePicker, { componentRef: ref, selectedItemsListProps: selectedPeopleListProps, floatingSuggestionProps: floatingPeoplePickerProps, inputProps: inputProps, 
                // eslint-disable-next-line react/jsx-no-bind
                onInputChange: _onInputChange, 
                // eslint-disable-next-line react/jsx-no-bind
                onPaste: _onPaste, autofillDragDropEnabled: false })));
    };
    exports.UnifiedPeoplePickerExample = UnifiedPeoplePickerExample;
});
//# sourceMappingURL=UnifiedPeoplePicker.Example.js.map