define(["require", "exports", "tslib", "react", "../../../../Utilities", "./EditingItem.scss"], function (require, exports, tslib_1, React, Utilities_1, stylesImport) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    // tslint:disable-next-line:no-any
    var styles = stylesImport;
    var EditingItem = /** @class */ (function (_super) {
        tslib_1.__extends(EditingItem, _super);
        function EditingItem(props) {
            var _this = _super.call(this, props) || this;
            _this._editingFloatingPicker = React.createRef();
            _this._renderEditingSuggestions = function () {
                var FloatingPicker = _this.props.onRenderFloatingPicker;
                var floatingPickerProps = _this.props.floatingPickerProps;
                if (!FloatingPicker || !floatingPickerProps) {
                    return React.createElement(React.Fragment, null);
                }
                return (React.createElement(FloatingPicker, tslib_1.__assign({ componentRef: _this._editingFloatingPicker, onChange: _this._onSuggestionSelected, inputElement: _this._editingInput, selectedItems: [] }, floatingPickerProps)));
            };
            _this._resolveInputRef = function (ref) {
                _this._editingInput = ref;
                _this.forceUpdate(function () {
                    _this._editingInput.focus();
                });
            };
            _this._onInputClick = function () {
                _this._editingFloatingPicker.current && _this._editingFloatingPicker.current.showPicker(true /*updatevalue*/);
            };
            _this._onInputBlur = function (ev) {
                if (_this._editingFloatingPicker.current && ev.relatedTarget !== null) {
                    var target = ev.relatedTarget;
                    if (target.className.indexOf('ms-Suggestions-itemButton') === -1 && target.className.indexOf('ms-Suggestions-sectionButton') === -1) {
                        _this._editingFloatingPicker.current.forceResolveSuggestion();
                    }
                }
            };
            _this._onInputChange = function (ev) {
                var value = ev.target.value;
                if (value === '') {
                    if (_this.props.onRemoveItem) {
                        _this.props.onRemoveItem();
                    }
                }
                else {
                    _this._editingFloatingPicker.current && _this._editingFloatingPicker.current.onQueryStringChanged(value);
                }
            };
            _this._onSuggestionSelected = function (item) {
                _this.props.onEditingComplete(_this.props.item, item);
            };
            _this.state = { contextualMenuVisible: false };
            return _this;
        }
        EditingItem.prototype.componentDidMount = function () {
            var getEditingItemText = this.props.getEditingItemText;
            var itemText = getEditingItemText(this.props.item);
            this._editingFloatingPicker.current && this._editingFloatingPicker.current.onQueryStringChanged(itemText);
            this._editingInput.value = itemText;
            this._editingInput.focus();
        };
        EditingItem.prototype.render = function () {
            var itemId = Utilities_1.getId();
            var nativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties);
            return (React.createElement("div", { "aria-labelledby": 'editingItemPersona-' + itemId, className: Utilities_1.css('ms-EditingItem', styles.editingContainer) },
                React.createElement("input", tslib_1.__assign({}, nativeProps, { ref: this._resolveInputRef, autoCapitalize: 'off', autoComplete: 'off', onChange: this._onInputChange, onKeyDown: this._onInputKeyDown, onBlur: this._onInputBlur, onClick: this._onInputClick, "data-lpignore": true, className: styles.editingInput, id: itemId })),
                this._renderEditingSuggestions()));
        };
        EditingItem.prototype._onInputKeyDown = function (ev) {
            if (ev.which === Utilities_1.KeyCodes.backspace || ev.which === Utilities_1.KeyCodes.del) {
                ev.stopPropagation();
            }
        };
        return EditingItem;
    }(Utilities_1.BaseComponent));
    exports.EditingItem = EditingItem;
});
//# sourceMappingURL=EditingItem.js.map