define(["require", "exports", "tslib", "react", "@fluentui/react-experiments/lib/UnifiedPeoplePicker", "@fluentui/example-data"], function (require, exports, tslib_1, React, UnifiedPeoplePicker_1, example_data_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.DoubleUnifiedPeoplePickerExample = 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,
        },
    ];
    var UnifiedPeoplePickerExample = function () {
        var _a = React.useState(tslib_1.__spreadArrays(_suggestions)), peopleSuggestions = _a[0], setPeopleSuggestions = _a[1];
        var _b = React.useState([]), peopleSelectedItems = _b[0], setPeopleSelectedItems = _b[1];
        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 _serializeItemsForDrag = function (items) {
            return _getItemsCopyText(items);
        };
        var _deserializeItemsFromDrop = function (input) {
            // Turn the dropped text into items
            var newItems = [];
            if (input !== null) {
                input.split(',').forEach(function (textValue) {
                    if (textValue) {
                        example_data_1.people.forEach(function (suggestionItem) {
                            if (suggestionItem.text === textValue) {
                                newItems.push(suggestionItem);
                            }
                        });
                    }
                });
            }
            return newItems;
        };
        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);
                    }
                }
                if (insertIndex === currentItems.length) {
                    newItems.forEach(function (draggedItem) {
                        updatedItems_1.push(draggedItem);
                    });
                }
                setPeopleSelectedItems(updatedItems_1);
            }
        };
        var _itemsAreEqual = function (item1, item2) {
            return (item1 === null || item1 === void 0 ? void 0 : item1.key) === (item2 === null || item2 === void 0 ? void 0 : item2.key);
        };
        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 SEPARATOR_REGEX = new RegExp(';|,|\\n|\u000A', 'g');
        var splitPasteInputIntoRecipientStrings = function (inputText) {
            return inputText
                .split(SEPARATOR_REGEX)
                .map(function (token) { return token.trim(); })
                .filter(function (token) { return !!token; });
        };
        var _onInputChange = function (filterText, composing, resultItemsList) {
            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 };
            });
            var updatedItems = [];
            var currentItems = tslib_1.__spreadArrays(peopleSelectedItems);
            var lastCharIndex = filterText.length - 1;
            var lastChar = filterText[lastCharIndex];
            for (var i = 0; i < currentItems.length; i++) {
                var item = currentItems[i];
                updatedItems.push(item);
            }
            if (lastChar === ';' || lastChar === ',') {
                var pastedText = splitPasteInputIntoRecipientStrings(filterText);
                pastedText.forEach(function (itemText) {
                    var result;
                    var extractedText = itemText.substring(0, lastCharIndex);
                    // We need to do an exact match
                    allPeople.forEach(function (item) {
                        var _a;
                        if (((_a = item.text) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === extractedText.toLowerCase()) {
                            result = item;
                        }
                    });
                    if (result && resultItemsList) {
                        resultItemsList.push(result);
                        updatedItems.push(result);
                    }
                    setPeopleSelectedItems(updatedItems);
                });
            }
            else {
                // We want to show top 5 results
                setPeopleSuggestions(suggestionList.splice(0, 5));
            }
        };
        function _startsWith(text, filterText) {
            return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
        }
        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,
        };
        var selectedPeopleListProps = {
            selectedItems: tslib_1.__spreadArrays(peopleSelectedItems),
            removeButtonAriaLabel: 'Remove',
            onItemsRemoved: _onItemsRemoved,
            getItemCopyText: _getItemsCopyText,
            serializeItemsForDrag: _serializeItemsForDrag,
            deserializeItemsFromDrop: _deserializeItemsFromDrop,
            dropItemsAt: _dropItemsAt,
            itemsAreEqual: _itemsAreEqual,
        };
        var inputProps = {
            'aria-label': 'Add people',
        };
        return (React.createElement(React.Fragment, null,
            React.createElement(UnifiedPeoplePicker_1.UnifiedPeoplePicker, { 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, customClipboardType: "recipients" })));
    };
    var DoubleUnifiedPeoplePickerExample = function () {
        return (React.createElement(React.Fragment, null,
            "To: ",
            React.createElement(UnifiedPeoplePickerExample, null),
            "CC: ",
            React.createElement(UnifiedPeoplePickerExample, null)));
    };
    exports.DoubleUnifiedPeoplePickerExample = DoubleUnifiedPeoplePickerExample;
});
//# sourceMappingURL=DoubleUnifiedPeoplePicker.Example.js.map