define(["require", "exports", "tslib", "react", "../../Utilities", "../../Icon", "./SearchBox.scss"], function (require, exports, tslib_1, React, Utilities_1, Icon_1, stylesImport) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    var SearchBox = (function (_super) {
        tslib_1.__extends(SearchBox, _super);
        function SearchBox(props) {
            var _this = _super.call(this, props) || this;
            _this.state = {
                value: props.value || '',
                hasFocus: false,
                id: Utilities_1.getId('SearchBox')
            };
            return _this;
        }
        SearchBox.prototype.componentWillReceiveProps = function (newProps) {
            if (newProps.value !== undefined) {
                this._latestValue = newProps.value;
                this.setState({
                    value: newProps.value
                });
            }
        };
        SearchBox.prototype.render = function () {
            var _a = this.props, labelText = _a.labelText, className = _a.className, disabled = _a.disabled;
            var _b = this.state, value = _b.value, hasFocus = _b.hasFocus, id = _b.id;
            return (React.createElement("div", tslib_1.__assign({ ref: this._resolveRef('_rootElement'), className: Utilities_1.css('ms-SearchBox', className, styles.root, (_c = {},
                    _c['is-active ' + styles.rootIsActive] = hasFocus,
                    _c['is-disabled ' + styles.rootIsDisabled] = disabled,
                    _c['can-clear ' + styles.rootCanClear] = value.length > 0,
                    _c)) }, { onFocusCapture: this._onFocusCapture }),
                React.createElement("div", { className: Utilities_1.css('ms-SearchBox-iconContainer', styles.iconContainer) },
                    React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-SearchBox-icon', styles.icon), iconName: 'Search' })),
                React.createElement("input", { id: id, className: Utilities_1.css('ms-SearchBox-field', styles.field), placeholder: labelText, onChange: this._onInputChange, onInput: this._onInputChange, onKeyDown: this._onKeyDown, value: value, disabled: this.props.disabled, "aria-label": this.props.ariaLabel ? this.props.ariaLabel : this.props.labelText, ref: this._resolveRef('_inputElement') }),
                React.createElement("div", { className: Utilities_1.css('ms-SearchBox-clearButton', styles.clearButton), onClick: this._onClear },
                    React.createElement(Icon_1.Icon, { iconName: 'Clear' }))));
            var _c;
        };
        /**
         * Sets focus to the search box input field
         */
        SearchBox.prototype.focus = function () {
            if (this._inputElement) {
                this._inputElement.focus();
            }
        };
        SearchBox.prototype._onClear = function (ev) {
            this.props.onClear && this.props.onClear(ev);
            if (!ev.defaultPrevented) {
                this._latestValue = '';
                this.setState({
                    value: ''
                });
                this._callOnChange('');
                ev.stopPropagation();
                ev.preventDefault();
                this._inputElement.focus();
            }
        };
        SearchBox.prototype._onFocusCapture = function (ev) {
            this.setState({
                hasFocus: true
            });
            this._events.on(this._rootElement, 'blur', this._onBlur, true);
            if (this.props.onFocus) {
                this.props.onFocus(ev);
            }
        };
        SearchBox.prototype._onKeyDown = function (ev) {
            switch (ev.which) {
                case 27 /* escape */:
                    this.props.onEscape && this.props.onEscape(ev);
                    if (!ev.defaultPrevented) {
                        this._onClear(ev);
                    }
                    break;
                case 13 /* enter */:
                    if (this.props.onSearch && this.state.value.length > 0) {
                        this.props.onSearch(this.state.value);
                    }
                    break;
                default:
                    return;
            }
            // We only get here if the keypress has been handled.
            ev.preventDefault();
            ev.stopPropagation();
        };
        SearchBox.prototype._onBlur = function (ev) {
            this._events.off(this._rootElement, 'blur');
            this.setState({
                hasFocus: false
            });
            if (this.props.onBlur) {
                this.props.onBlur(ev);
            }
        };
        SearchBox.prototype._onInputChange = function (ev) {
            var value = this._inputElement.value;
            if (value === this._latestValue) {
                return;
            }
            this._latestValue = value;
            this.setState({ value: value });
            this._callOnChange(value);
        };
        SearchBox.prototype._callOnChange = function (newValue) {
            var _a = this.props, onChange = _a.onChange, onChanged = _a.onChanged;
            // Call @deprecated method.
            if (onChanged) {
                onChanged(newValue);
            }
            if (onChange) {
                onChange(newValue);
            }
        };
        SearchBox.defaultProps = {
            labelText: 'Search',
        };
        tslib_1.__decorate([
            Utilities_1.autobind
        ], SearchBox.prototype, "_onClear", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], SearchBox.prototype, "_onFocusCapture", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], SearchBox.prototype, "_onKeyDown", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], SearchBox.prototype, "_onBlur", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], SearchBox.prototype, "_onInputChange", null);
        return SearchBox;
    }(Utilities_1.BaseComponent));
    exports.SearchBox = SearchBox;
});
//# sourceMappingURL=SearchBox.js.map