"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 Icon_1 = require("../../Icon");
var getClassNames = Utilities_1.classNamesFunction();
var SearchBoxBase = /** @class */ (function (_super) {
    tslib_1.__extends(SearchBoxBase, _super);
    function SearchBoxBase(props) {
        var _this = _super.call(this, props) || this;
        _this._rootElement = Utilities_1.createRef();
        _this._inputElement = Utilities_1.createRef();
        _this._onClickFocus = function () {
            var inputElement = _this._inputElement.value;
            if (inputElement) {
                _this.focus();
                inputElement.selectionStart = inputElement.selectionEnd = 0;
            }
        };
        _this._onFocusCapture = function (ev) {
            _this.setState({
                hasFocus: true
            });
            _this._events.on(ev.currentTarget, 'blur', _this._onBlur, true);
            if (_this.props.onFocus) {
                _this.props.onFocus(ev);
            }
        };
        _this._onClearClick = function (ev) {
            var clearButtonProps = _this.props.clearButtonProps;
            if (clearButtonProps && clearButtonProps.onClick) {
                clearButtonProps.onClick(ev);
            }
            if (!ev.defaultPrevented) {
                _this._onClear(ev);
            }
        };
        _this._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.props.onSearch(_this.state.value);
                    }
                    break;
                default:
                    _this.props.onKeyDown && _this.props.onKeyDown(ev);
                    if (!ev.defaultPrevented) {
                        return;
                    }
            }
            // We only get here if the keypress has been handled,
            // or preventDefault was called in case of default keyDown handler
            ev.preventDefault();
            ev.stopPropagation();
        };
        _this._onBlur = function (ev) {
            _this._events.off(_this._rootElement.current, 'blur');
            _this.setState({
                hasFocus: false
            });
            if (_this.props.onBlur) {
                _this.props.onBlur(ev);
            }
        };
        _this._onInputChange = function (ev) {
            var value = ev.target.value;
            if (value === _this._latestValue) {
                return;
            }
            _this._latestValue = value;
            _this.setState({ value: value });
            _this._callOnChange(value);
        };
        _this._warnDeprecations({
            labelText: 'placeholder',
            defaultValue: 'value'
        });
        _this._latestValue = props.value || '';
        _this.state = {
            value: _this._latestValue,
            hasFocus: false,
            id: Utilities_1.getId('SearchBox')
        };
        return _this;
    }
    SearchBoxBase.prototype.componentWillReceiveProps = function (newProps) {
        if (newProps.value !== undefined) {
            this._latestValue = newProps.value;
            this.setState({
                value: newProps.value
            });
        }
    };
    SearchBoxBase.prototype.render = function () {
        var _a = this.props, ariaLabel = _a.ariaLabel, placeholder = _a.placeholder, className = _a.className, disabled = _a.disabled, underlined = _a.underlined, styles = _a.styles, labelText = _a.labelText, theme = _a.theme, clearButtonProps = _a.clearButtonProps, disableAnimation = _a.disableAnimation, iconProps = _a.iconProps;
        var _b = this.state, value = _b.value, hasFocus = _b.hasFocus, id = _b.id;
        var placeholderValue = labelText === undefined ? placeholder : labelText;
        var classNames = getClassNames(styles, {
            theme: theme,
            className: className,
            underlined: underlined,
            hasFocus: hasFocus,
            disabled: disabled,
            hasInput: value.length > 0,
            disableAnimation: disableAnimation
        });
        var nativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.inputProperties, ['id', 'className', 'placeholder', 'onFocus', 'onBlur', 'value']);
        return (React.createElement("div", { ref: this._rootElement, className: classNames.root, onFocusCapture: this._onFocusCapture },
            React.createElement("div", { className: classNames.iconContainer, onClick: this._onClickFocus, "aria-hidden": true },
                React.createElement(Icon_1.Icon, tslib_1.__assign({ iconName: "Search" }, iconProps, { className: classNames.icon }))),
            React.createElement("input", tslib_1.__assign({}, nativeProps, { id: id, className: classNames.field, placeholder: placeholderValue, onChange: this._onInputChange, onInput: this._onInputChange, onKeyDown: this._onKeyDown, value: value, disabled: disabled, "aria-label": ariaLabel ? ariaLabel : placeholder, ref: this._inputElement })),
            value.length > 0 && (React.createElement("div", { className: classNames.clearButton },
                React.createElement(Button_1.IconButton, tslib_1.__assign({ styles: { root: { height: 'auto' }, icon: { fontSize: '12px' } }, iconProps: { iconName: 'Clear' } }, clearButtonProps, { onClick: this._onClearClick }))))));
    };
    /**
     * Sets focus to the search box input field
     */
    SearchBoxBase.prototype.focus = function () {
        if (this._inputElement.current) {
            this._inputElement.current.focus();
        }
    };
    /**
     * Returns whether or not the SearchBox has focus
     */
    SearchBoxBase.prototype.hasFocus = function () {
        return !!this.state.hasFocus;
    };
    SearchBoxBase.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.focus();
        }
    };
    SearchBoxBase.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);
        }
    };
    SearchBoxBase.defaultProps = {
        disableAnimation: false,
        clearButtonProps: { ariaLabel: 'Clear text' }
    };
    return SearchBoxBase;
}(Utilities_1.BaseComponent));
exports.SearchBoxBase = SearchBoxBase;
//# sourceMappingURL=SearchBox.base.js.map