"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FloatingPeopleSuggestionsCustomRenderExample = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var FloatingPeopleSuggestionsComposite_1 = require("@fluentui/react-experiments/lib-commonjs/FloatingPeopleSuggestionsComposite");
var example_data_1 = require("@fluentui/example-data");
var Utilities_1 = require("@fluentui/react-experiments/lib-commonjs/Utilities");
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 style_utilities_1 = require("@fluentui/style-utilities");
var GlobalClassNames = {
    root: 'ms-FloatingPeopleSuggestions-SuggestionItemDefault-persona',
    callout: 'ms-FloatingPeopleSuggestions-SuggestionItemDefault-personaContent',
};
var getStyles = function (props) {
    var _a;
    var theme = style_utilities_1.getTheme();
    if (!theme) {
        throw new Error('theme is undefined or null in Editing item getStyles function.');
    }
    // const { semanticColors } = theme;
    var classNames = style_utilities_1.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',
            },
        ],
    };
};
var FloatingPeopleSuggestionsCustomRenderExample = function () {
    var _a = React.useState(tslib_1.__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
                    ? tslib_1.__assign(tslib_1.__assign({}, suggestion), { isSelected: true }) : tslib_1.__assign(tslib_1.__assign({}, suggestion), { isSelected: false });
            });
            return modifiedSuggestions;
        });
    };
    var renderSuggestionItem = React.useCallback(function (suggestionItemProps) {
        var getClassNames = Utilities_1.classNamesFunction();
        var classNames = getClassNames(getStyles);
        return (React.createElement("div", { className: Utilities_1.css('ms-PeoplePicker-personaContent', classNames.personaContent) },
            React.createElement("div", null,
                suggestionItemProps.item.text,
                " (",
                suggestionItemProps.item.secondaryText,
                ")")));
    }, []);
    return (React.createElement(React.Fragment, null,
        React.createElement(FloatingPeopleSuggestionsComposite_1.FloatingPeopleSuggestions, { suggestions: tslib_1.__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 })));
};
exports.FloatingPeopleSuggestionsCustomRenderExample = FloatingPeopleSuggestionsCustomRenderExample;
//# sourceMappingURL=FloatingPeopleSuggestions.CustomRender.Example.js.map