/// class PD.Web.UI.Controls.SearchBox
/// using PD.Web.UI.Controls.Control

PD.Web.UI.Controls.SearchBox =
PD.Web.UI.Controls.Control.extend({

    //===================================
    // FIELDS
    //===================================

    _isEmpty: null,
    _input: null,
    _label: null,
    _button: null,
    _hasValueClass: "has-value",

    //===================================
    // PROPERTIES
    //===================================

    get_input: function () {
        return this.get_node().find("INPUT");
    },

    get_hasValue: function () {
        return this.get_node().hasClass(this._hasValueClass);
    },

    get_watermark: function () {
        return this.get_options()["watermark"] ? this.get_options()["watermark"] : "Search...";
    },

    get_button: function () {
        return this.get_node().find("button");
    },

    get_buttonIcon: function () {
        return this.get_button().children("i");
    },

    //===================================
    // PROTECTED EVENT HANDLERS
    //===================================

    onInit: function () {
        this._isEmpty = true;
    },

    template: function (e) {
        return `<div class="-pd-searchbox">
                    <div>
                        <input type="text" />
                    </div>
                    <div>
                        <button>
                            <i class="icofont-search" />
                        </button>
                    </div>
                </div>`;
    },

    onActivate: function () {

        this._input = this.get_node().find("INPUT");
        this._label = this.get_node().find("LABEL");
        this._button = this.get_node().find("BUTTON");

        this._label.on("click", $.proxy(this._label_onFocus, this));
        this._input.on("blur", $.proxy(this._input_onBlur, this));
        this._input.on("focus", $.proxy(this._input_onFocus, this));
        this._input.on("keyup", $.proxy(this._input_onKeyUp, this));
        this._button.on("click", $.proxy(this._button_onClick, this));
        this._label.show();

    },

    //===================================
    // PRIVATE EVENT HANDLERS
    //===================================

    _label_onFocus: function (e) {
        this._label.hide();
        this._input.focus();
    },

    _input_onFocus: function (e) {
        this._label.hide();
    },

    _input_onBlur: function (e) {
        if (this._input.val() == "") {
            this._label.show();
            if (this.get_hasValue()) {
                this._clearSearch();
            }
        }
    },

    _input_onKeyUp: function (e) {
        if (e.keyCode === 13) {
            e.stopPropagation();
            e.cancelBubble = true;
            e.returnValue = false;
            this._executeSearch();
            return false;
        }
    },

    _button_onClick: function (e) {

        var hasClass = this.get_hasValue();

        if (hasClass) {
            this._clearSearch();
        }
        else {
            this._executeSearch();
        }

    },

    //===================================
    // PUBLIC METHODS
    //===================================

    value: function () {
        return this._input.val()
    },

    focus: function () {
        this.get_input().focus();
    },

    //===================================
    // PRIVATE METHODS
    //===================================

    _clearSearch: function () {
        this._input.val("");
        this._label.show();
        this.get_node().removeClass(this._hasValueClass);
        this.get_buttonIcon().addClass("icofont-search");
        this.get_buttonIcon().removeClass("icofont-close");
        this._callSearch();
    },

    _executeSearch: function () {

        if (this.value() === "") {
            this._clearSearch();
            return
        }

        this.get_node().addClass(this._hasValueClass);
        this.get_buttonIcon().addClass("icofont-close");
        this.get_buttonIcon().removeClass("icofont-search");

        this._callSearch();
    },

    _callSearch: function () {
        if (this._options.search) {
            this._options.search(this.value());
        }
    }

});