"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var FloatingPeopleSuggestionsComposite_1 = require("@uifabric/experiments/lib-commonjs/FloatingPeopleSuggestionsComposite");
var example_data_1 = require("@uifabric/example-data");
var react_hooks_1 = require("@uifabric/react-hooks");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var Utilities_1 = require("@uifabric/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,
    },
];
exports.FloatingPeopleSuggestionsHeaderFooterExample = function () {
    var _a = React.useState(tslib_1.__spreadArrays(_suggestions)), peopleSuggestions = _a[0], setPeopleSuggestions = _a[1];
    var _b = React.useState(0), selectedSuggestionIndex = _b[0], setSelectedSuggestionIndex = _b[1];
    var _c = React.useState(-1), selectedFooterIndex = _c[0], setSelectedFooterIndex = _c[1];
    var selectedHeaderIndex = -1;
    var input = React.useRef(null);
    var suggestionProps = react_hooks_1.useConst(function () {
        return {
            headerItemsProps: [
                {
                    renderItem: function () {
                        return React.createElement(React.Fragment, null, "People Suggestions");
                    },
                    shouldShow: function () {
                        return peopleSuggestions.length > 0;
                    },
                    ariaLabel: 'People suggestions header',
                },
            ],
            footerItemsProps: [
                {
                    renderItem: function () {
                        return React.createElement(React.Fragment, null,
                            "Showing ",
                            peopleSuggestions.length,
                            " results");
                    },
                    shouldShow: function () {
                        return peopleSuggestions.length > 0;
                    },
                    onExecute: function () {
                        alert('You selected people suggestions');
                    },
                    ariaLabel: 'Showing results',
                },
                {
                    renderItem: function () {
                        return React.createElement(React.Fragment, null, "Select to log out to console");
                    },
                    shouldShow: function () {
                        return peopleSuggestions.length > 0;
                    },
                    onExecute: function () {
                        console.log(peopleSuggestions);
                    },
                    ariaLabel: 'Select to log out to console',
                },
            ],
            suggestionsFooterContainerAriaLabel: 'Footer container',
            suggestionsHeaderContainerAriaLabel: 'Header container',
        };
    });
    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 selectPreviousItem = function () {
        // Headers are not selectable in this example
        // Suggestions
        if (selectedSuggestionIndex > -1) {
            if (selectedSuggestionIndex === 0) {
                setSelectedSuggestionIndex(-1);
            }
            // otherwise, move up one
            else {
                setSelectedSuggestionIndex(selectedSuggestionIndex - 1);
            }
        }
        // footers
        else if (selectedFooterIndex > -1) {
            if (selectedFooterIndex === 0) {
                // move to suggestions
                setSelectedFooterIndex(-1);
                setSelectedSuggestionIndex(peopleSuggestions.length - 1);
            }
            else {
                setSelectedFooterIndex(selectedFooterIndex - 1);
            }
        }
    };
    var selectNextItem = function () {
        // Headers are not selectable in this example
        // Suggestions
        if (selectedSuggestionIndex === -1 && selectedFooterIndex === -1) {
            setSelectedSuggestionIndex(0);
        }
        else if (selectedSuggestionIndex > -1) {
            // if we're at the end of the suggestions, move to the footer
            if (selectedSuggestionIndex === peopleSuggestions.length - 1) {
                setSelectedSuggestionIndex(-1);
                setSelectedFooterIndex(0);
            }
            // otherwise, move down one
            else {
                setSelectedSuggestionIndex(selectedSuggestionIndex + 1);
            }
        }
        // footers
        else if (selectedFooterIndex > -1) {
            if (selectedFooterIndex === suggestionProps.footerItemsProps.length - 1) {
                // if we're at the end, stay there
            }
            else {
                setSelectedFooterIndex(selectedFooterIndex + 1);
            }
        }
    };
    var _onInputKeyDown = function (ev) {
        var keyCode = ev.which;
        switch (keyCode) {
            case Utilities_1.KeyCodes.enter:
            case Utilities_1.KeyCodes.tab:
                if (selectedSuggestionIndex > -1) {
                    alert('an item was selected');
                }
                if (selectedFooterIndex > -1) {
                    suggestionProps.footerItemsProps[selectedFooterIndex].onExecute();
                }
                break;
            case Utilities_1.KeyCodes.up:
                ev.preventDefault();
                ev.stopPropagation();
                selectPreviousItem();
                break;
            case Utilities_1.KeyCodes.down:
                ev.preventDefault();
                ev.stopPropagation();
                selectNextItem();
                break;
        }
    };
    var _renderExtendedPicker = function () {
        var _a;
        return (React.createElement(React.Fragment, null,
            React.createElement(FloatingPeopleSuggestionsComposite_1.FloatingPeopleSuggestions, { suggestions: tslib_1.__spreadArrays(peopleSuggestions), isSuggestionsVisible: true, targetElement: (_a = input.current) === null || _a === void 0 ? void 0 : _a.inputElement, 
                /* eslint-disable react/jsx-no-bind */
                onSuggestionSelected: _onSuggestionSelected, onRemoveSuggestion: _onSuggestionRemoved, 
                /* eslint-enable react/jsx-no-bind */
                noResultsFoundText: 'No suggestions', onFloatingSuggestionsDismiss: undefined, showSuggestionRemoveButton: true, pickerSuggestionsProps: suggestionProps, selectedSuggestionIndex: selectedSuggestionIndex, selectedFooterIndex: selectedFooterIndex, selectedHeaderIndex: selectedHeaderIndex })));
    };
    return (React.createElement("div", { className: 'ms-BasePicker-text' },
        React.createElement(office_ui_fabric_react_1.Autofill, { ref: input, "aria-label": 'input', style: {
                display: 'flex',
                flex: '1 1 auto',
                height: '34px',
                border: 'none',
                outline: 'none',
                padding: '0 6px 0px',
                margin: '1px',
            }, 
            // eslint-disable-next-line react/jsx-no-bind
            onKeyDown: _onInputKeyDown }),
        _renderExtendedPicker()));
};
//# sourceMappingURL=FloatingPeopleSuggestions.HeaderFooter.Example.js.map