define(["require", "exports", "react", "@fluentui/react-next/lib/ExtendedPicker", "@fluentui/react-next/lib/compat/Button", "@fluentui/react-next/lib/FloatingPicker", "@fluentui/react-next/lib/SelectedItemsList", "@fluentui/react-next/lib/FocusZone", "@fluentui/react-next/lib/Styling", "@uifabric/example-data", "@uifabric/react-hooks"], function (require, exports, React, ExtendedPicker_1, Button_1, FloatingPicker_1, SelectedItemsList_1, FocusZone_1, Styling_1, example_data_1, react_hooks_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var theme = Styling_1.getTheme();
    var startsWith = function (text, filterText) {
        return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
    };
    var classNames = Styling_1.mergeStyleSets({
        picker: { maxWidth: 400, marginBottom: 15 },
        headerItem: {
            borderBottom: '1px solid ' + theme.palette.neutralLight,
            padding: '8px 12px',
        },
        footerItem: {
            borderBottom: '1px solid ' + theme.palette.neutralLight,
            height: 60,
            paddingLeft: 12,
        },
        to: { padding: '0 10px' },
    });
    var focusZoneProps = {
        shouldInputLoseFocusOnArrowKey: function () { return true; },
        handleTabKey: FocusZone_1.FocusZoneTabbableElements.all,
    };
    exports.ExtendedPeoplePickerBasicExample = function () {
        var picker = React.useRef(null);
        var _a = React.useState(example_data_1.people), peopleList = _a[0], setPeopleList = _a[1];
        var _b = React.useState(example_data_1.mru), mostRecentlyUsed = _b[0], setMostRecentlyUsed = _b[1];
        var _c = React.useState(true), searchMoreAvailable = _c[0], setSearchMoreAvailable = _c[1];
        var getEditingItemText = function (item) {
            return item.text;
        };
        var onSetFocusButtonClicked = React.useCallback(function () {
            var _a;
            (_a = picker.current) === null || _a === void 0 ? void 0 : _a.focus();
        }, []);
        var onExpandItem = function (item) {
            var _a;
            var selectedItemsList = (_a = picker.current) === null || _a === void 0 ? void 0 : _a.selectedItemsList.current;
            if (selectedItemsList) {
                selectedItemsList.replaceItem(item, getExpandedGroupItems(item));
            }
        };
        var onRemoveSuggestion = function (item) {
            var itemIndex = peopleList.indexOf(item);
            var itemMruIndex = mostRecentlyUsed.indexOf(item);
            if (itemIndex >= 0) {
                setPeopleList(peopleList.slice(0, itemIndex).concat(peopleList.slice(itemIndex + 1)));
            }
            if (itemMruIndex >= 0) {
                setMostRecentlyUsed(mostRecentlyUsed.slice(0, itemMruIndex).concat(mostRecentlyUsed.slice(itemMruIndex + 1)));
            }
        };
        var onFilterChanged = function (filterText, currentPersonas) {
            var filteredPersonas = [];
            if (filterText) {
                filteredPersonas = peopleList.filter(function (item) { return startsWith(item.text || '', filterText); });
                filteredPersonas = removeDuplicates(filteredPersonas, currentPersonas);
            }
            return convertResultsToPromise(filteredPersonas);
        };
        var returnMostRecentlyUsed = function () {
            var _a;
            var currentMostRecentlyUsed = mostRecentlyUsed;
            var items = ((_a = picker.current) === null || _a === void 0 ? void 0 : _a.items) || [];
            currentMostRecentlyUsed = removeDuplicates(currentMostRecentlyUsed, items);
            return convertResultsToPromise(currentMostRecentlyUsed);
        };
        var onCopyItems = function (items) {
            return items.map(function (item) { return item.text; }).join(', ');
        };
        var shouldShowForceResolve = function () {
            var _a;
            var floatingPicker = (_a = picker.current) === null || _a === void 0 ? void 0 : _a.floatingPicker.current;
            return !!floatingPicker && validateInput(floatingPicker.inputText) && floatingPicker.suggestions.length === 0;
        };
        var shouldShowSuggestedContacts = function () {
            var _a, _b;
            return ((_b = (_a = picker.current) === null || _a === void 0 ? void 0 : _a.inputElement) === null || _b === void 0 ? void 0 : _b.value) === '';
        };
        var listContainsPersona = function (persona, personas) {
            return !!personas && personas.some(function (item) { return item.text === persona.text; });
        };
        var removeDuplicates = function (personas, possibleDupes) {
            return personas.filter(function (persona) { return !listContainsPersona(persona, possibleDupes); });
        };
        var onInputChanged = function () {
            setSearchMoreAvailable(true);
        };
        var convertResultsToPromise = function (results) {
            return new Promise(function (resolve) { return setTimeout(function () { return resolve(results); }, 150); });
        };
        var validateInput = function (input) {
            return input.indexOf('@') !== -1;
        };
        var getExpandedGroupItems = function (item) {
            return item.text === 'Group One' ? example_data_1.groupOne : item.text === 'Group Two' ? example_data_1.groupTwo : [];
        };
        var suggestionProps = react_hooks_1.useConst({
            showRemoveButtons: true,
            headerItemsProps: [
                {
                    renderItem: function () {
                        var _a, _b;
                        return (React.createElement("div", { className: classNames.headerItem },
                            "Use this address: ",
                            ((_b = (_a = picker.current) === null || _a === void 0 ? void 0 : _a.inputElement) === null || _b === void 0 ? void 0 : _b.value) || ''));
                    },
                    shouldShow: function () {
                        var _a;
                        return !!((_a = picker.current) === null || _a === void 0 ? void 0 : _a.inputElement) && picker.current.inputElement.value.indexOf('@') > -1;
                    },
                    onExecute: function () {
                        var _a;
                        var floatingPicker = (_a = picker.current) === null || _a === void 0 ? void 0 : _a.floatingPicker.current;
                        if (floatingPicker) {
                            floatingPicker.forceResolveSuggestion();
                        }
                    },
                    ariaLabel: 'Use the typed address',
                },
                {
                    renderItem: function () {
                        return React.createElement("div", { className: classNames.headerItem }, "Suggested Contacts");
                    },
                    shouldShow: shouldShowSuggestedContacts,
                },
            ],
            footerItemsProps: [
                {
                    renderItem: function () {
                        return React.createElement("div", { className: classNames.footerItem }, "No results");
                    },
                    shouldShow: function () {
                        var _a;
                        var floatingPicker = (_a = picker.current) === null || _a === void 0 ? void 0 : _a.floatingPicker.current;
                        return !!floatingPicker && floatingPicker.suggestions.length === 0;
                    },
                },
                {
                    renderItem: function () {
                        return React.createElement("div", { className: classNames.footerItem }, "Search for more");
                    },
                    onExecute: function () {
                        setSearchMoreAvailable(false);
                    },
                    shouldShow: function () {
                        return searchMoreAvailable && !shouldShowSuggestedContacts();
                    },
                    ariaLabel: 'Search more',
                },
            ],
            shouldSelectFirstItem: function () {
                return !shouldShowSuggestedContacts();
            },
        });
        var floatingPickerProps = {
            suggestionsStore: new FloatingPicker_1.SuggestionsStore(),
            onResolveSuggestions: onFilterChanged,
            getTextFromItem: function (persona) { return persona.text || ''; },
            pickerSuggestionsProps: suggestionProps,
            key: 'normal',
            onRemoveSuggestion: onRemoveSuggestion,
            onValidateInput: validateInput,
            onZeroQuerySuggestion: returnMostRecentlyUsed,
            showForceResolve: shouldShowForceResolve,
            onInputChanged: onInputChanged,
            onSuggestionsHidden: function () {
                console.log('FLOATINGPICKER: hidden');
            },
            onSuggestionsShown: function () {
                console.log('FLOATINGPICKER: shown');
            },
        };
        var selectedItemsListProps = {
            onCopyItems: onCopyItems,
            onExpandGroup: onExpandItem,
            removeMenuItemText: 'Remove',
            copyMenuItemText: 'Copy name',
            editMenuItemText: 'Edit',
            getEditingItemText: getEditingItemText,
            onRenderFloatingPicker: FloatingPicker_1.FloatingPeoplePicker,
            floatingPickerProps: floatingPickerProps,
        };
        return (React.createElement("div", null,
            React.createElement(ExtendedPicker_1.ExtendedPeoplePicker, { floatingPickerProps: floatingPickerProps, selectedItemsListProps: selectedItemsListProps, onRenderFloatingPicker: FloatingPicker_1.FloatingPeoplePicker, onRenderSelectedItems: SelectedItemsList_1.SelectedPeopleList, className: classNames.picker, key: "normal", inputProps: {
                    onBlur: function () { return console.log('onBlur called'); },
                    onFocus: function () { return console.log('onFocus called'); },
                    'aria-label': 'People Picker',
                }, componentRef: picker, headerComponent: React.createElement("div", { className: classNames.to, "data-is-focusable": true }, "To:"), focusZoneProps: focusZoneProps }),
            React.createElement(Button_1.PrimaryButton, { text: "Set focus", onClick: onSetFocusButtonClicked })));
    };
});
//# sourceMappingURL=ExtendedPeoplePicker.Basic.Example.js.map