import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css, createRef } from '../../Utilities';
import { Autofill } from '../../Autofill';
import * as stylesImport from './BaseExtendedPicker.scss';
import { Selection, SelectionMode, SelectionZone } from '../../Selection';
// tslint:disable-next-line:no-any
var styles = stylesImport;
var BaseExtendedPicker = /** @class */ (function (_super) {
    tslib_1.__extends(BaseExtendedPicker, _super);
    function BaseExtendedPicker(basePickerProps) {
        var _this = _super.call(this, basePickerProps) || this;
        _this.floatingPicker = createRef();
        _this.selectedItemsList = createRef();
        _this.root = createRef();
        _this.input = createRef();
        _this.onSelectionChange = function () {
            _this.forceUpdate();
        };
        _this.onInputChange = function (value) {
            if (_this.floatingPicker.current) {
                _this.floatingPicker.current.onQueryStringChanged(value);
            }
        };
        _this.onInputFocus = function (ev) {
            if (_this.selectedItemsList.current) {
                _this.selectedItemsList.current.unselectAll();
            }
            if (_this.props.inputProps && _this.props.inputProps.onFocus) {
                _this.props.inputProps.onFocus(ev);
            }
        };
        _this.onInputClick = function (ev) {
            if (_this.selectedItemsList.current) {
                _this.selectedItemsList.current.unselectAll();
            }
            if (_this.floatingPicker.current) {
                _this.floatingPicker.current.showPicker(true /*updateValue*/);
            }
        };
        // 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
        _this.onBackspace = function (ev) {
            if (ev.which !== 8 /* backspace */) {
                return;
            }
            if ((_this.state.items.length && !_this.input.current) || (_this.input.current && !_this.input.current.isValueSelected)) {
                if (_this.selectedItemsList.current && _this.input.current.cursorLocation === 0) {
                    _this.selectedItemsList.current.removeItemAt(_this.items.length - 1);
                    _this._onSelectedItemsChanged();
                }
            }
        };
        _this.onCopy = function (ev) {
            if (_this.selectedItemsList.current) {
                // Pass it down into the selected items list
                _this.selectedItemsList.current.onCopy(ev);
            }
        };
        _this.onPaste = function (ev) {
            if (_this.props.onPaste) {
                var inputText = ev.clipboardData.getData('Text');
                ev.preventDefault();
                _this.props.onPaste(inputText);
            }
        };
        _this._onSuggestionSelected = function (item) {
            if (_this.selectedItemsList.current) {
                _this.selectedItemsList.current.addItems([item]);
            }
            if (_this.props.onItemSelected) {
                _this.props.onItemSelected(item);
            }
            if (_this.input.current) {
                _this.input.current.clear();
            }
            if (_this.floatingPicker.current) {
                _this.floatingPicker.current.hidePicker();
            }
            _this.focus();
        };
        _this._onSelectedItemsChanged = function () {
            _this.focus();
        };
        _this.selection = new Selection({ onSelectionChanged: function () { return _this.onSelectionChange(); } });
        _this.state = {
            items: _this.props.selectedItemsListProps.selectedItems ? _this.props.selectedItemsListProps.selectedItems : [],
            suggestedDisplayValue: '',
        };
        _this.floatingPickerProps = _this.props.floatingPickerProps;
        _this.selectedItemsListProps = _this.props.selectedItemsListProps;
        return _this;
    }
    Object.defineProperty(BaseExtendedPicker.prototype, "items", {
        // tslint:disable-next-line:no-any
        get: function () {
            return this.selectedItemsList.current ? this.selectedItemsList.current.items : [];
        },
        enumerable: true,
        configurable: true
    });
    BaseExtendedPicker.prototype.componentDidMount = function () {
        this.forceUpdate();
    };
    BaseExtendedPicker.prototype.focus = function () {
        if (this.input.current) {
            this.input.current.focus();
        }
    };
    BaseExtendedPicker.prototype.clearInput = function () {
        if (this.input.current) {
            this.input.current.clear();
        }
    };
    Object.defineProperty(BaseExtendedPicker.prototype, "inputElement", {
        get: function () {
            return this.input.current && this.input.current.inputElement;
        },
        enumerable: true,
        configurable: true
    });
    BaseExtendedPicker.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.root, className: css('ms-BasePicker', className ? className : ''), onKeyDown: this.onBackspace, onCopy: this.onCopy },
            React.createElement(SelectionZone, { selection: this.selection, selectionMode: SelectionMode.multiple },
                React.createElement("div", { className: css('ms-BasePicker-text', styles.pickerText), role: 'list' },
                    this.props.headerComponent,
                    this.renderSelectedItemsList(),
                    this.canAddItems() && (React.createElement(Autofill, tslib_1.__assign({}, inputProps, { className: css('ms-BasePicker-input', styles.pickerInput), ref: this.input, onFocus: this.onInputFocus, onClick: this.onInputClick, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, "aria-activedescendant": 'sug-' + this.state.items.length, "aria-owns": 'suggestion-list', "aria-expanded": 'true', "aria-haspopup": 'true', autoCapitalize: 'off', autoComplete: 'off', role: 'combobox', disabled: disabled, "aria-controls": 'selected-suggestion-alert', onPaste: this.onPaste }))))),
            this.renderSuggestions()));
    };
    BaseExtendedPicker.prototype.canAddItems = function () {
        var items = this.state.items;
        var itemLimit = this.props.itemLimit;
        return itemLimit === undefined || items.length < itemLimit;
    };
    BaseExtendedPicker.prototype.renderSuggestions = function () {
        var onRenderFloatingPicker = this.props.onRenderFloatingPicker;
        return (onRenderFloatingPicker(tslib_1.__assign({ componentRef: this.floatingPicker, onChange: this._onSuggestionSelected, inputElement: this.input.current ? this.input.current.inputElement : undefined, selectedItems: this.selectedItemsList.current ? this.selectedItemsList.current.items : [] }, this.floatingPickerProps)));
    };
    BaseExtendedPicker.prototype.renderSelectedItemsList = function () {
        var onRenderSelectedItems = this.props.onRenderSelectedItems;
        return (onRenderSelectedItems(tslib_1.__assign({ componentRef: this.selectedItemsList }, this.selectedItemsListProps)));
    };
    return BaseExtendedPicker;
}(BaseComponent));
export { BaseExtendedPicker };
//# sourceMappingURL=BaseExtendedPicker.js.map