"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var FocusZone_1 = require("../../FocusZone");
var Callout_1 = require("../../Callout");
var index_1 = require("../../utilities/selection/index");
var Suggestions_1 = require("./Suggestions/Suggestions");
var SuggestionsController_1 = require("./Suggestions/SuggestionsController");
var BaseAutoFill_1 = require("./AutoFill/BaseAutoFill");
var stylesImport = require("./BasePicker.scss");
var styles = stylesImport;
var BasePicker = (function (_super) {
    tslib_1.__extends(BasePicker, _super);
    function BasePicker(basePickerProps) {
        var _this = _super.call(this, basePickerProps) || this;
        _this.SuggestionOfProperType = Suggestions_1.Suggestions;
        var items = basePickerProps.defaultSelectedItems || [];
        _this.suggestionStore = new SuggestionsController_1.SuggestionsController();
        _this.selection = new index_1.Selection({ onSelectionChanged: function () { return _this.onSelectionChange(); } });
        _this.selection.setItems(items);
        _this.state = {
            items: items,
            suggestedDisplayValue: '',
            isMostRecentlyUsedVisible: false,
            moreSuggestionsAvailable: false,
            isSearching: false
        };
        return _this;
    }
    Object.defineProperty(BasePicker.prototype, "items", {
        get: function () {
            return this.state.items;
        },
        enumerable: true,
        configurable: true
    });
    BasePicker.prototype.componentWillUpdate = function (newProps, newState) {
        if (newState.items && newState.items !== this.state.items) {
            this.selection.setItems(newState.items);
        }
    };
    BasePicker.prototype.componentDidMount = function () {
        this.selection.setItems(this.state.items);
    };
    BasePicker.prototype.focus = function () {
        this.focusZone.focus();
    };
    BasePicker.prototype.dismissSuggestions = function () {
        this.setState({ suggestionsVisible: false });
    };
    BasePicker.prototype.completeSuggestion = function () {
        if (this.suggestionStore.hasSelectedSuggestion()) {
            this.addItem(this.suggestionStore.currentSuggestion.item);
            this.updateValue('');
            this.input.clear();
        }
    };
    BasePicker.prototype.render = function () {
        var suggestedDisplayValue = this.state.suggestedDisplayValue;
        var _a = this.props, className = _a.className, inputProps = _a.inputProps, disabled = _a.disabled;
        return (React.createElement("div", { ref: this._resolveRef('root'), className: Utilities_1.css('ms-BasePicker', className ? className : ''), onKeyDown: this.onKeyDown },
            React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('focusZone'), direction: FocusZone_1.FocusZoneDirection.bidirectional, isInnerZoneKeystroke: this._isFocusZoneInnerKeystroke },
                React.createElement(index_1.SelectionZone, { selection: this.selection, selectionMode: index_1.SelectionMode.multiple },
                    React.createElement("div", { className: Utilities_1.css('ms-BasePicker-text', styles.pickerText) },
                        this.renderItems(),
                        React.createElement(BaseAutoFill_1.BaseAutoFill, tslib_1.__assign({}, inputProps, { className: Utilities_1.css('ms-BasePicker-input', styles.pickerInput), ref: this._resolveRef('input'), onFocus: this.onInputFocus, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": 'sug-' + this.suggestionStore.currentIndex, "aria-owns": 'suggestion-list', "aria-expanded": 'true', "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox', disabled: disabled }))))),
            this.renderSuggestions()));
    };
    BasePicker.prototype.renderSuggestions = function () {
        var TypedSuggestion = this.SuggestionOfProperType;
        return this.state.suggestionsVisible ? (React.createElement(Callout_1.Callout, { isBeakVisible: false, gapSpace: 5, targetElement: this.input.inputElement, onDismiss: this.dismissSuggestions, directionalHint: Utilities_1.getRTL() ? Callout_1.DirectionalHint.bottomRightEdge : Callout_1.DirectionalHint.bottomLeftEdge },
            React.createElement(TypedSuggestion, tslib_1.__assign({ onRenderSuggestion: this.props.onRenderSuggestionsItem, onSuggestionClick: this.onSuggestionClick, onSuggestionRemove: this.onSuggestionRemove, suggestions: this.suggestionStore.getSuggestions(), ref: this._resolveRef('suggestionElement'), onGetMoreResults: this.onGetMoreResults, moreSuggestionsAvailable: this.state.moreSuggestionsAvailable, isLoading: this.state.suggestionsLoading, isSearching: this.state.isSearching, isMostRecentlyUsedVisible: this.state.isMostRecentlyUsedVisible, isResultsFooterVisible: this.state.isResultsFooterVisible }, this.props.pickerSuggestionsProps)))) : (null);
    };
    BasePicker.prototype.renderItems = function () {
        var _this = this;
        var onRenderItem = this.props.onRenderItem;
        var items = this.state.items;
        return items.map(function (item, index) { return onRenderItem({
            item: item,
            index: index,
            key: item.key ? item.key : index,
            selected: _this.selection.isIndexSelected(index),
            onRemoveItem: function () { return _this.removeItem(item); },
            onItemChange: _this.onItemChange
        }); });
    };
    BasePicker.prototype.resetFocus = function (index) {
        var items = this.state.items;
        if (items.length) {
            var newEl = this.root.querySelectorAll('[data-selection-index]')[Math.min(index, items.length - 1)];
            if (newEl) {
                this.focusZone.focusElement(newEl);
            }
        }
        else {
            this.input.focus();
        }
    };
    BasePicker.prototype.onSuggestionSelect = function () {
        if (this.suggestionStore.currentSuggestion) {
            var currentValue = this.input.value;
            var itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue);
            this.setState({ suggestedDisplayValue: itemValue });
        }
    };
    BasePicker.prototype.onSelectionChange = function () {
        this.forceUpdate();
    };
    BasePicker.prototype.updateSuggestions = function (suggestions) {
        this.suggestionStore.updateSuggestions(suggestions, 0);
        this.forceUpdate();
    };
    BasePicker.prototype.onEmptyInputFocus = function () {
        var suggestions = this.props.onEmptyInputFocus(this.state.items);
        this.updateSuggestionsList(suggestions);
    };
    BasePicker.prototype.updateValue = function (updatedValue) {
        var suggestions = this.props.onResolveSuggestions(updatedValue, this.state.items);
        this.updateSuggestionsList(suggestions, updatedValue);
    };
    BasePicker.prototype.updateSuggestionsList = function (suggestions, updatedValue) {
        var _this = this;
        var suggestionsArray = suggestions;
        var suggestionsPromiseLike = suggestions;
        // Check to see if the returned value is an array, if it is then just pass it into the next function.
        // If the returned value is not an array then check to see if it's a promise or PromiseLike. If it is then resolve it asynchronously.
        if (Array.isArray(suggestionsArray)) {
            if (updatedValue !== undefined) {
                this.resolveNewValue(updatedValue, suggestionsArray);
            }
            else {
                this.suggestionStore.updateSuggestions(suggestionsArray);
            }
        }
        else if (suggestionsPromiseLike && suggestionsPromiseLike.then) {
            if (!this.loadingTimer) {
                this.loadingTimer = this._async.setTimeout(function () { return _this.setState({
                    suggestionsLoading: true
                }); }, 500);
            }
            // Clear suggestions
            this.suggestionStore.updateSuggestions([]);
            if (updatedValue !== undefined) {
                this.setState({
                    suggestionsVisible: this.input.value !== '' && this.input.inputElement === document.activeElement
                });
            }
            else {
                this.setState({
                    suggestionsVisible: this.input.inputElement === document.activeElement
                });
            }
            // Ensure that the promise will only use the callback if it was the most recent one.
            var promise_1 = this.currentPromise = suggestionsPromiseLike;
            promise_1.then(function (newSuggestions) {
                if (promise_1 === _this.currentPromise) {
                    if (updatedValue !== undefined) {
                        _this.resolveNewValue(updatedValue, newSuggestions);
                    }
                    else {
                        _this.suggestionStore.updateSuggestions(newSuggestions);
                        _this.setState({
                            suggestionsLoading: false
                        });
                    }
                    if (_this.loadingTimer) {
                        _this._async.clearTimeout(_this.loadingTimer);
                        _this.loadingTimer = undefined;
                    }
                }
            });
        }
    };
    BasePicker.prototype.resolveNewValue = function (updatedValue, suggestions) {
        this.suggestionStore.updateSuggestions(suggestions, 0);
        var itemValue = undefined;
        if (this.suggestionStore.currentSuggestion) {
            itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, updatedValue);
        }
        this.setState({
            suggestionsLoading: false,
            suggestedDisplayValue: itemValue,
            suggestionsVisible: this.input.value !== '' && this.input.inputElement === document.activeElement
        });
    };
    BasePicker.prototype.onChange = function () {
        if (this.props.onChange) {
            this.props.onChange(this.state.items);
        }
    };
    BasePicker.prototype.onInputChange = function (value) {
        this.updateValue(value);
        this.setState({
            moreSuggestionsAvailable: true,
            isMostRecentlyUsedVisible: false
        });
    };
    BasePicker.prototype.onSuggestionClick = function (ev, item, index) {
        this.addItemByIndex(index);
    };
    BasePicker.prototype.onSuggestionRemove = function (ev, item, index) {
        if (this.props.onRemoveSuggestion) {
            this.props.onRemoveSuggestion(item);
        }
        this.suggestionStore.removeSuggestion(index);
    };
    BasePicker.prototype.onInputFocus = function (ev) {
        this.selection.setAllSelected(false);
        if (this.input.value === '' && this.props.onEmptyInputFocus) {
            this.onEmptyInputFocus();
            this.setState({
                isMostRecentlyUsedVisible: true,
                moreSuggestionsAvailable: false,
                suggestionsVisible: true
            });
        }
        else if (this.input.value) {
            this.setState({
                isMostRecentlyUsedVisible: false,
                suggestionsVisible: true
            });
        }
    };
    BasePicker.prototype.onKeyDown = function (ev) {
        var value = this.input.value;
        switch (ev.which) {
            case Utilities_1.KeyCodes.escape:
                if (this.state.suggestionsVisible) {
                    this.dismissSuggestions();
                    ev.preventDefault();
                    ev.stopPropagation();
                }
                break;
            case Utilities_1.KeyCodes.tab:
            case Utilities_1.KeyCodes.enter:
                if (!ev.shiftKey && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestionsVisible) {
                    this.completeSuggestion();
                    ev.preventDefault();
                    ev.stopPropagation();
                }
                break;
            case Utilities_1.KeyCodes.backspace:
                this.onBackspace(ev);
                break;
            case Utilities_1.KeyCodes.del:
                if (ev.target === this.input.inputElement && this.state.suggestionsVisible && this.suggestionStore.currentIndex !== -1) {
                    if (this.props.onRemoveSuggestion) {
                        this.props.onRemoveSuggestion(this.suggestionStore.currentSuggestion.item);
                    }
                    this.suggestionStore.removeSuggestion(this.suggestionStore.currentIndex);
                    this.forceUpdate();
                }
                break;
            case Utilities_1.KeyCodes.up:
                if (ev.target === this.input.inputElement && this.suggestionStore.previousSuggestion() && this.state.suggestionsVisible) {
                    ev.preventDefault();
                    ev.stopPropagation();
                    this.onSuggestionSelect();
                }
                break;
            case Utilities_1.KeyCodes.down:
                if (ev.target === this.input.inputElement && this.state.suggestionsVisible) {
                    if (this.suggestionStore.nextSuggestion()) {
                        ev.preventDefault();
                        ev.stopPropagation();
                        this.onSuggestionSelect();
                    }
                }
                break;
        }
    };
    BasePicker.prototype.onItemChange = function (changedItem, index) {
        var _this = this;
        var items = this.state.items;
        if (index >= 0) {
            var newItems = items;
            newItems[index] = changedItem;
            this.setState({ items: newItems }, function () { return _this.onChange(); });
        }
    };
    BasePicker.prototype.onGetMoreResults = function () {
        var _this = this;
        this.setState({
            isSearching: true
        }, function () {
            if (_this.props.onGetMoreResults) {
                var suggestions = _this.props.onGetMoreResults(_this.input.value, _this.state.items);
                var suggestionsArray = suggestions;
                var suggestionsPromiseLike = suggestions;
                if (Array.isArray(suggestionsArray)) {
                    _this.updateSuggestions(suggestionsArray);
                    _this.setState({ isSearching: false });
                }
                else if (suggestionsPromiseLike.then) {
                    suggestionsPromiseLike.then(function (newSuggestions) {
                        _this.updateSuggestions(newSuggestions);
                        _this.setState({ isSearching: false });
                    });
                }
            }
            else {
                _this.setState({ isSearching: false });
            }
            _this.input.focus();
            _this.setState({
                moreSuggestionsAvailable: false,
                isResultsFooterVisible: true
            });
        });
    };
    BasePicker.prototype.addItemByIndex = function (index) {
        this.addItem(this.suggestionStore.getSuggestionAtIndex(index).item);
        this.input.clear();
        this.updateValue('');
    };
    BasePicker.prototype.addItem = function (item) {
        var _this = this;
        var newItems = this.state.items.concat([item]);
        this.setState({ items: newItems }, function () { return _this.onChange(); });
    };
    BasePicker.prototype.removeItem = function (item) {
        var _this = this;
        var items = this.state.items;
        var index = items.indexOf(item);
        if (index >= 0) {
            var newItems = items.slice(0, index).concat(items.slice(index + 1));
            this.setState({ items: newItems }, function () { return _this.onChange(); });
        }
    };
    BasePicker.prototype.removeItems = function (itemsToRemove) {
        var _this = this;
        var items = this.state.items;
        var newItems = items.filter(function (item) { return itemsToRemove.indexOf(item) === -1; });
        var firstItemToRemove = this.selection.getSelection()[0];
        var index = items.indexOf(firstItemToRemove);
        this.setState({ items: newItems }, function () {
            _this.resetFocus(index);
            _this.onChange();
        });
    };
    // This is protected because we may expect the backspace key to work differently in a different kind of picker.
    // This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow
    BasePicker.prototype.onBackspace = function (ev) {
        if (this.state.items.length && !this.input.isValueSelected && this.input.cursorLocation === 0) {
            if (this.selection.getSelectedCount() > 0) {
                this.removeItems(this.selection.getSelection());
            }
            else {
                this.removeItem(this.state.items[this.state.items.length - 1]);
            }
        }
    };
    BasePicker.prototype._isFocusZoneInnerKeystroke = function (ev) {
        // If suggestions are shown let up/down keys control them, otherwise allow them through to control the focusZone.
        if (this.state.suggestionsVisible) {
            switch (ev.which) {
                case Utilities_1.KeyCodes.up:
                case Utilities_1.KeyCodes.down:
                    return true;
            }
        }
        return false;
    };
    BasePicker.prototype._getTextFromItem = function (item, currentValue) {
        if (this.props.getTextFromItem) {
            return this.props.getTextFromItem(item, currentValue);
        }
        else {
            return '';
        }
    };
    return BasePicker;
}(Utilities_1.BaseComponent));
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "dismissSuggestions", null);
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "onInputChange", null);
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "onSuggestionClick", null);
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "onSuggestionRemove", null);
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "onInputFocus", null);
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "onKeyDown", null);
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "onItemChange", null);
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "onGetMoreResults", null);
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "addItemByIndex", null);
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "addItem", null);
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "removeItem", null);
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "removeItems", null);
tslib_1.__decorate([
    Utilities_1.autobind
], BasePicker.prototype, "_isFocusZoneInnerKeystroke", null);
exports.BasePicker = BasePicker;
var BasePickerListBelow = (function (_super) {
    tslib_1.__extends(BasePickerListBelow, _super);
    function BasePickerListBelow() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    BasePickerListBelow.prototype.render = function () {
        var suggestedDisplayValue = this.state.suggestedDisplayValue;
        var _a = this.props, className = _a.className, inputProps = _a.inputProps, disabled = _a.disabled;
        return (React.createElement("div", null,
            React.createElement("div", { ref: this._resolveRef('root'), className: Utilities_1.css('ms-BasePicker', className ? className : ''), onKeyDown: this.onKeyDown },
                React.createElement(index_1.SelectionZone, { selection: this.selection, selectionMode: index_1.SelectionMode.multiple },
                    React.createElement("div", { className: Utilities_1.css('ms-BasePicker-text', styles.pickerText) },
                        React.createElement(BaseAutoFill_1.BaseAutoFill, tslib_1.__assign({}, inputProps, { className: Utilities_1.css('ms-BasePicker-input', styles.pickerInput), ref: this._resolveRef('input'), onFocus: this.onInputFocus, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": 'sug-' + this.suggestionStore.currentIndex, "aria-owns": 'suggestion-list', "aria-expanded": 'true', "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox', disabled: disabled }))))),
            this.renderSuggestions(),
            React.createElement(FocusZone_1.FocusZone, { ref: this._resolveRef('focusZone'), className: 'ms-BasePicker-selectedItems', isCircularNavigation: true, direction: FocusZone_1.FocusZoneDirection.bidirectional, isInnerZoneKeystroke: this._isFocusZoneInnerKeystroke }, this.renderItems())));
    };
    BasePickerListBelow.prototype.onBackspace = function (ev) {
        // override the existing backspace method to not do anything because the list items appear below.
    };
    return BasePickerListBelow;
}(BasePicker));
exports.BasePickerListBelow = BasePickerListBelow;

//# sourceMappingURL=BasePicker.js.map
