import { __assign, __spreadArrays } from "tslib";
import * as React from 'react';
import { FloatingPeopleSuggestions, } from '@uifabric/experiments/lib/FloatingPeopleSuggestionsComposite';
import { mru } from '@uifabric/example-data';
var _suggestions = [
    {
        key: '1',
        id: '1',
        displayText: 'Suggestion 1',
        item: mru[0],
        isSelected: true,
        showRemoveButton: true,
    },
    {
        key: '2',
        id: '2',
        displayText: 'Suggestion 2',
        item: mru[1],
        isSelected: false,
        showRemoveButton: true,
    },
    {
        key: '3',
        id: '3',
        displayText: 'Suggestion 3',
        item: mru[2],
        isSelected: false,
        showRemoveButton: true,
    },
    {
        key: '4',
        id: '4',
        displayText: 'Suggestion 4',
        item: mru[3],
        isSelected: false,
        showRemoveButton: true,
    },
    {
        key: '5',
        id: '5',
        displayText: 'Suggestion 5',
        item: mru[4],
        isSelected: false,
        showRemoveButton: true,
    },
];
export var FloatingPeopleSuggestionsExample = function () {
    var _a = React.useState(__spreadArrays(_suggestions)), peopleSuggestions = _a[0], setPeopleSuggestions = _a[1];
    var _onSuggestionSelected = function (ev, item) {
        _markSuggestionSelected(item);
    };
    var _onSuggestionRemoved = function (ev, suggestionToRemove) {
        setPeopleSuggestions(function (suggestions) {
            var modifiedSuggestions = suggestions.filter(function (item) { return item.id !== suggestionToRemove.id; });
            return modifiedSuggestions;
        });
    };
    var _markSuggestionSelected = function (selectedSuggestion) {
        setPeopleSuggestions(function (suggestions) {
            var modifiedSuggestions = suggestions.map(function (suggestion) {
                return suggestion.id === selectedSuggestion.id
                    ? __assign(__assign({}, suggestion), { isSelected: true }) : __assign(__assign({}, suggestion), { isSelected: false });
            });
            return modifiedSuggestions;
        });
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(FloatingPeopleSuggestions, { suggestions: __spreadArrays(peopleSuggestions), isSuggestionsVisible: true, targetElement: null, 
            /* eslint-disable react/jsx-no-bind */
            onSuggestionSelected: _onSuggestionSelected, onRemoveSuggestion: _onSuggestionRemoved, 
            /* eslint-enable react/jsx-no-bind */
            suggestionsHeaderText: 'People suggestions', noResultsFoundText: 'No suggestions', onFloatingSuggestionsDismiss: undefined, showSuggestionRemoveButton: true })));
};
//# sourceMappingURL=FloatingPeopleSuggestions.Example.js.map