import { __assign, __spreadArrays } from "tslib";
import * as React from 'react';
import { FloatingPeopleSuggestions, } from '@uifabric/experiments/lib/FloatingPeopleSuggestionsComposite';
import { mru } from '@uifabric/example-data';
import { css, classNamesFunction } from '@uifabric/experiments/lib/Utilities';
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,
    },
];
import { getGlobalClassNames, getTheme } from '@uifabric/styling';
var GlobalClassNames = {
    root: 'ms-FloatingPeopleSuggestions-SuggestionItemDefault-persona',
    callout: 'ms-FloatingPeopleSuggestions-SuggestionItemDefault-personaContent',
};
var getStyles = function (props) {
    var _a;
    var theme = getTheme();
    if (!theme) {
        throw new Error('theme is undefined or null in Editing item getStyles function.');
    }
    // const { semanticColors } = theme;
    var classNames = getGlobalClassNames(GlobalClassNames, theme);
    return {
        persona: [
            classNames.root,
            {
                width: '100%',
                selectors: (_a = {},
                    _a['.ms-Persona-detail'] = {
                        minHeight: '40px',
                    },
                    _a),
            },
        ],
        personaContent: [
            classNames.callout,
            {
                display: 'flex',
                width: '100%',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: '7px 12px',
            },
        ],
    };
};
export var FloatingPeopleSuggestionsCustomRenderExample = 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;
        });
    };
    var renderSuggestionItem = React.useCallback(function (suggestionItemProps) {
        var getClassNames = classNamesFunction();
        var classNames = getClassNames(getStyles);
        return (React.createElement("div", { className: css('ms-PeoplePicker-personaContent', classNames.personaContent) },
            React.createElement("div", null,
                suggestionItemProps.item.text,
                " (",
                suggestionItemProps.item.secondaryText,
                ")")));
    }, []);
    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, onRenderSuggestion: renderSuggestionItem })));
};
//# sourceMappingURL=FloatingPeopleSuggestions.CustomRender.Example.js.map