"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../../Utilities");
var Button_1 = require("../../../Button");
var Spinner_1 = require("../../../Spinner");
var stylesImport = require("./Suggestions.scss");
var styles = stylesImport;
var SuggestionActionType;
(function (SuggestionActionType) {
    SuggestionActionType[SuggestionActionType["none"] = 0] = "none";
    SuggestionActionType[SuggestionActionType["forceResolve"] = 1] = "forceResolve";
    SuggestionActionType[SuggestionActionType["searchMore"] = 2] = "searchMore";
})(SuggestionActionType = exports.SuggestionActionType || (exports.SuggestionActionType = {}));
var SuggestionsItem = /** @class */ (function (_super) {
    tslib_1.__extends(SuggestionsItem, _super);
    function SuggestionsItem() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SuggestionsItem.prototype.render = function () {
        var _a = this.props, suggestionModel = _a.suggestionModel, RenderSuggestion = _a.RenderSuggestion, onClick = _a.onClick, className = _a.className, onRemoveItem = _a.onRemoveItem, isSelectedOverride = _a.isSelectedOverride, removeButtonAriaLabel = _a.removeButtonAriaLabel;
        return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-item', styles.suggestionsItem, (_b = {},
                _b['is-suggested ' + styles.suggestionsItemIsSuggested] = suggestionModel.selected || isSelectedOverride,
                _b), className) },
            React.createElement(Button_1.CommandButton, { onClick: onClick, className: Utilities_1.css('ms-Suggestions-itemButton', styles.itemButton) }, RenderSuggestion(suggestionModel.item, this.props)),
            this.props.showRemoveButton ? (React.createElement(Button_1.IconButton, { iconProps: { iconName: 'Cancel', style: { fontSize: '12px' } }, title: removeButtonAriaLabel, ariaLabel: removeButtonAriaLabel, onClick: onRemoveItem, className: Utilities_1.css('ms-Suggestions-closeButton', styles.closeButton) })) : null));
        var _b;
    };
    return SuggestionsItem;
}(Utilities_1.BaseComponent));
exports.SuggestionsItem = SuggestionsItem;
var Suggestions = /** @class */ (function (_super) {
    tslib_1.__extends(Suggestions, _super);
    function Suggestions(suggestionsProps) {
        var _this = _super.call(this, suggestionsProps) || this;
        _this._forceResolveButton = Utilities_1.createRef();
        _this._searchForMoreButton = Utilities_1.createRef();
        _this._selectedElement = Utilities_1.createRef();
        _this.SuggestionsItemOfProperType = SuggestionsItem;
        /**
         * Returns true if the event was handled, false otherwise
         */
        _this.tryHandleKeyDown = function (keyCode, currentSuggestionIndex) {
            var isEventHandled = false;
            var newSelectedActionType = null;
            var currentSelectedAction = _this.state.selectedActionType;
            var suggestionLength = _this.props.suggestions.length;
            if (keyCode === 40 /* down */) {
                switch (currentSelectedAction) {
                    case SuggestionActionType.forceResolve:
                        if (suggestionLength > 0) {
                            _this._refocusOnSuggestions(keyCode);
                            newSelectedActionType = SuggestionActionType.none;
                        }
                        else if (_this._searchForMoreButton.current) {
                            newSelectedActionType = SuggestionActionType.searchMore;
                        }
                        else {
                            newSelectedActionType = SuggestionActionType.forceResolve;
                        }
                        break;
                    case SuggestionActionType.searchMore:
                        if (_this._forceResolveButton.current) {
                            newSelectedActionType = SuggestionActionType.forceResolve;
                        }
                        else if (suggestionLength > 0) {
                            _this._refocusOnSuggestions(keyCode);
                            newSelectedActionType = SuggestionActionType.none;
                        }
                        else {
                            newSelectedActionType = SuggestionActionType.searchMore;
                        }
                        break;
                    case SuggestionActionType.none:
                        if (currentSuggestionIndex === -1 && _this._forceResolveButton.current) {
                            newSelectedActionType = SuggestionActionType.forceResolve;
                        }
                        break;
                }
            }
            else if (keyCode === 38 /* up */) {
                switch (currentSelectedAction) {
                    case SuggestionActionType.forceResolve:
                        if (_this._searchForMoreButton.current) {
                            newSelectedActionType = SuggestionActionType.searchMore;
                        }
                        else if (suggestionLength > 0) {
                            _this._refocusOnSuggestions(keyCode);
                            newSelectedActionType = SuggestionActionType.none;
                        }
                        break;
                    case SuggestionActionType.searchMore:
                        if (suggestionLength > 0) {
                            _this._refocusOnSuggestions(keyCode);
                            newSelectedActionType = SuggestionActionType.none;
                        }
                        else if (_this._forceResolveButton.current) {
                            newSelectedActionType = SuggestionActionType.forceResolve;
                        }
                        break;
                    case SuggestionActionType.none:
                        if (currentSuggestionIndex === -1 && _this._searchForMoreButton.current) {
                            newSelectedActionType = SuggestionActionType.searchMore;
                        }
                        break;
                }
            }
            if (newSelectedActionType !== null) {
                _this.setState({ selectedActionType: newSelectedActionType });
                isEventHandled = true;
            }
            return isEventHandled;
        };
        _this._getMoreResults = function () {
            if (_this.props.onGetMoreResults) {
                _this.props.onGetMoreResults();
            }
        };
        _this._forceResolve = function () {
            if (_this.props.createGenericItem) {
                _this.props.createGenericItem();
            }
        };
        _this._shouldShowForceResolve = function () {
            return _this.props.showForceResolve ? _this.props.showForceResolve() : false;
        };
        _this._onClickTypedSuggestionsItem = function (item, index) {
            return function (ev) {
                _this.props.onSuggestionClick(ev, item, index);
            };
        };
        _this._refocusOnSuggestions = function (keyCode) {
            if (typeof _this.props.refocusSuggestions === 'function') {
                _this.props.refocusSuggestions(keyCode);
            }
        };
        _this._onRemoveTypedSuggestionsItem = function (item, index) {
            return function (ev) {
                var onSuggestionRemove = _this.props.onSuggestionRemove;
                onSuggestionRemove(ev, item, index);
                ev.stopPropagation();
            };
        };
        _this.state = {
            selectedActionType: SuggestionActionType.none
        };
        return _this;
    }
    Suggestions.prototype.componentDidMount = function () {
        this.scrollSelected();
        this.activeSelectedElement = this._selectedElement ? this._selectedElement.current : null;
    };
    Suggestions.prototype.componentDidUpdate = function () {
        // Only scroll to selected element if the selected element has changed. Otherwise do nothing.
        // This prevents some odd behavior where scrolling the active element out of view and clicking on a selected element
        // will trigger a focus event and not give the clicked element the click.
        if (this._selectedElement.current && this.activeSelectedElement !== this._selectedElement.current) {
            this.scrollSelected();
            this.activeSelectedElement = this._selectedElement.current;
        }
    };
    Suggestions.prototype.render = function () {
        var _a = this.props, forceResolveText = _a.forceResolveText, mostRecentlyUsedHeaderText = _a.mostRecentlyUsedHeaderText, searchForMoreText = _a.searchForMoreText, className = _a.className, moreSuggestionsAvailable = _a.moreSuggestionsAvailable, noResultsFoundText = _a.noResultsFoundText, suggestions = _a.suggestions, isLoading = _a.isLoading, isSearching = _a.isSearching, loadingText = _a.loadingText, onRenderNoResultFound = _a.onRenderNoResultFound, searchingText = _a.searchingText, isMostRecentlyUsedVisible = _a.isMostRecentlyUsedVisible, resultsMaximumNumber = _a.resultsMaximumNumber, resultsFooterFull = _a.resultsFooterFull, resultsFooter = _a.resultsFooter, _b = _a.isResultsFooterVisible, isResultsFooterVisible = _b === void 0 ? true : _b, suggestionsAvailableAlertText = _a.suggestionsAvailableAlertText, suggestionsHeaderText = _a.suggestionsHeaderText;
        var noResults = function () {
            return noResultsFoundText ? (React.createElement("div", { role: "alert", className: Utilities_1.css('ms-Suggestions-none', styles.suggestionsNone) }, noResultsFoundText)) : null;
        };
        // MostRecently Used text should supercede the header text if it's there and available.
        var headerText = suggestionsHeaderText;
        if (isMostRecentlyUsedVisible && mostRecentlyUsedHeaderText) {
            headerText = mostRecentlyUsedHeaderText;
        }
        var footerTitle = undefined;
        if (isResultsFooterVisible) {
            footerTitle = suggestions.length >= resultsMaximumNumber ? resultsFooterFull : resultsFooter;
        }
        var hasNoSuggestions = (!suggestions || !suggestions.length) && !isLoading;
        return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions', className ? className : '', styles.root) },
            headerText ? React.createElement("div", { className: Utilities_1.css('ms-Suggestions-title', styles.suggestionsTitle) }, headerText) : null,
            forceResolveText &&
                this._shouldShowForceResolve() && (React.createElement(Button_1.CommandButton, { componentRef: this._forceResolveButton, className: Utilities_1.css('ms-forceResolve-button', styles.actionButton, (_c = {},
                    _c['is-selected ' + styles.buttonSelected] = this.state.selectedActionType === SuggestionActionType.forceResolve,
                    _c)), onClick: this._forceResolve }, forceResolveText)),
            isLoading && (React.createElement(Spinner_1.Spinner, { className: Utilities_1.css('ms-Suggestions-spinner', styles.suggestionsSpinner), label: loadingText })),
            hasNoSuggestions
                ? onRenderNoResultFound
                    ? onRenderNoResultFound(undefined, noResults)
                    : noResults()
                : this._renderSuggestions(),
            searchForMoreText &&
                moreSuggestionsAvailable && (React.createElement(Button_1.CommandButton, { componentRef: this._searchForMoreButton, className: Utilities_1.css('ms-SearchMore-button', styles.actionButton, (_d = {},
                    _d['is-selected ' + styles.buttonSelected] = this.state.selectedActionType === SuggestionActionType.searchMore,
                    _d)), iconProps: { iconName: 'Search' }, onClick: this._getMoreResults }, searchForMoreText)),
            isSearching ? (React.createElement(Spinner_1.Spinner, { className: Utilities_1.css('ms-Suggestions-spinner', styles.suggestionsSpinner), label: searchingText })) : null,
            footerTitle && !moreSuggestionsAvailable && !isMostRecentlyUsedVisible && !isSearching ? (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-title', styles.suggestionsTitle) }, footerTitle(this.props))) : null,
            React.createElement("span", { role: "alert", "aria-live": "polite", className: Utilities_1.css('ms-Suggestions-suggestionsAvailable', styles.suggestionsAvailable) }, !isLoading && !isSearching && suggestions && suggestions.length > 0 && suggestionsAvailableAlertText
                ? suggestionsAvailableAlertText
                : null)));
        var _c, _d;
    };
    Suggestions.prototype.hasSuggestedAction = function () {
        return this._searchForMoreButton.current !== undefined || this._forceResolveButton.current !== undefined;
    };
    Suggestions.prototype.hasSuggestedActionSelected = function () {
        return this.state.selectedActionType !== SuggestionActionType.none;
    };
    Suggestions.prototype.executeSelectedAction = function () {
        switch (this.state.selectedActionType) {
            case SuggestionActionType.forceResolve:
                this._forceResolve();
                break;
            case SuggestionActionType.searchMore:
                this._getMoreResults();
                break;
        }
    };
    Suggestions.prototype.focusAboveSuggestions = function () {
        if (this._forceResolveButton.current) {
            this.setState({ selectedActionType: SuggestionActionType.forceResolve });
        }
        else if (this._searchForMoreButton.current) {
            this.setState({ selectedActionType: SuggestionActionType.searchMore });
        }
    };
    Suggestions.prototype.focusBelowSuggestions = function () {
        if (this._searchForMoreButton.current) {
            this.setState({ selectedActionType: SuggestionActionType.searchMore });
        }
        else if (this._forceResolveButton.current) {
            this.setState({ selectedActionType: SuggestionActionType.forceResolve });
        }
    };
    Suggestions.prototype.focusSearchForMoreButton = function () {
        if (this._searchForMoreButton.current) {
            this._searchForMoreButton.current.focus();
        }
    };
    // TODO get the element to scroll into view properly regardless of direction.
    Suggestions.prototype.scrollSelected = function () {
        if (this._selectedElement.current && this._selectedElement.current.scrollIntoView !== undefined) {
            this._selectedElement.current.scrollIntoView(false);
        }
    };
    Suggestions.prototype._renderSuggestions = function () {
        var _this = this;
        var _a = this.props, onRenderSuggestion = _a.onRenderSuggestion, removeSuggestionAriaLabel = _a.removeSuggestionAriaLabel, suggestionsItemClassName = _a.suggestionsItemClassName, resultsMaximumNumber = _a.resultsMaximumNumber, showRemoveButtons = _a.showRemoveButtons, suggestionsContainerAriaLabel = _a.suggestionsContainerAriaLabel;
        var suggestions = this.props.suggestions;
        var TypedSuggestionsItem = this.SuggestionsItemOfProperType;
        if (resultsMaximumNumber) {
            suggestions = suggestions.slice(0, resultsMaximumNumber);
        }
        return (React.createElement("div", { className: Utilities_1.css('ms-Suggestions-container', styles.suggestionsContainer), id: "suggestion-list", role: "list", "aria-label": suggestionsContainerAriaLabel }, suggestions.map(function (suggestion, index) { return (React.createElement("div", { ref: suggestion.selected ? _this._selectedElement : '', 
            // tslint:disable-next-line:no-string-literal
            key: suggestion.item['key'] ? suggestion.item['key'] : index, id: 'sug-' + index, role: "listitem", "aria-label": suggestion.ariaLabel },
            React.createElement(TypedSuggestionsItem, { id: 'sug-item' + index, suggestionModel: suggestion, RenderSuggestion: onRenderSuggestion, onClick: _this._onClickTypedSuggestionsItem(suggestion.item, index), className: suggestionsItemClassName, showRemoveButton: showRemoveButtons, removeButtonAriaLabel: removeSuggestionAriaLabel, onRemoveItem: _this._onRemoveTypedSuggestionsItem(suggestion.item, index) }))); })));
    };
    return Suggestions;
}(Utilities_1.BaseComponent));
exports.Suggestions = Suggestions;
//# sourceMappingURL=Suggestions.js.map