var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", 'react', '../../utilities/css', './SearchBox.scss'], function (require, exports, React, css_1) {
    "use strict";
    var _instance = 0;
    var SearchBox = (function (_super) {
        __extends(SearchBox, _super);
        function SearchBox(props) {
            _super.call(this, props);
            this.state = {
                value: props.value,
                hasFocus: false,
                id: "searchbox-" + _instance++,
            };
            this._clearInput = this._clearInput.bind(this);
            this._onInputChanged = this._onInputChanged.bind(this);
            this._onInputFocus = this._onInputFocus.bind(this);
            this._onInputBlur = this._onInputBlur.bind(this);
        }
        SearchBox.prototype.componentWillReceiveProps = function (newProps) {
            if (newProps.value !== undefined) {
                this.setState({
                    value: newProps.value
                });
            }
        };
        SearchBox.prototype.render = function () {
            var _a = this.props, labelText = _a.labelText, className = _a.className;
            var _b = this.state, value = _b.value, hasFocus = _b.hasFocus, id = _b.id;
            return (React.createElement("div", {className: css_1.css('ms-SearchBox', className, {
                'is-active': hasFocus
            })}, !hasFocus && !value ? React.createElement("label", {className: 'ms-SearchBox-label', htmlFor: id}, React.createElement("i", {className: 'ms-SearchBox-icon ms-Icon ms-Icon--search'}), labelText) : null, React.createElement("input", {id: id, className: 'ms-SearchBox-field', onFocus: this._onInputFocus, onBlur: this._onInputBlur, onChange: this._onInputChanged, value: value, ref: 'inputText'}), React.createElement("button", {className: 'ms-SearchBox-closeButton', onMouseDown: this._clearInput}, React.createElement("i", {className: 'ms-Icon ms-Icon--x'}))));
        };
        SearchBox.prototype._clearInput = function (ev) {
            this.setState({
                value: undefined
            });
            ev.stopPropagation();
            ev.preventDefault();
        };
        SearchBox.prototype._onInputFocus = function () {
            this.setState({
                hasFocus: true
            });
        };
        SearchBox.prototype._onInputBlur = function () {
            this.setState({
                hasFocus: false
            });
        };
        SearchBox.prototype._onInputChanged = function (ev) {
            this.setState({
                value: this.refs.inputText.value
            });
            this._onChanged(this.refs.inputText.value);
        };
        SearchBox.prototype._onChanged = function (newValue) {
            var onChanged = this.props.onChanged;
            if (onChanged) {
                onChanged(newValue);
            }
        };
        SearchBox.defaultProps = {
            labelText: 'Search',
        };
        return SearchBox;
    }(React.Component));
    exports.SearchBox = SearchBox;
});
