/// class ProspectDirector.Web.UI.Queries.FilterOperatorFeature
/// using ProspectDirector.Web.UI.FeatureSets.MacroEditorBase

/**
@class FilterOperatorFeature
@constructor
@namespace Web.UI.Queries
@extends Web.UI.FeatureSets.MacroEditorBase
**/
ProspectDirector.Web.UI.Queries.FilterOperatorFeature = ProspectDirector.Web.UI.FeatureSets.MacroEditorBase.extend({

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

    get_operatorLabel: function () {
        return this.get_container().find("LABEL");
    },

    get_operatorField: function () {
        return this.get_container().find("SELECT[data-id=operator]");
    },

    get_suppliedByField: function () {
        return this.get_container().find("SELECT[data-id=suppliedBy]");
    },

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

    _suppliedByField_onChange: function () {
        this.setValue("useAutoValue", this.get_suppliedByField().val() === "true");
        this.get_eventBus().publish("reload-target");
    },

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

    activate: function () {
        this._configureOperatorField();
        this._configureSuppliedByField();
    },

    commit: function () {
        this.setValue("operatorId", this.get_operatorField().val());
    },

    render: function () {

        var result = "",
            supportsAutoValues = this.get_options().init.supportsAutoValues;

        result +=
        "<div id=\"" + this.getId() + "\" style=\"padding:10px 10px 0px 10px;\">" +
        "<label style=\"font-size:12px;\">Where <b>Current Value</b></label><br/>";

        result +=
        "<div style=\"position:relative;height:20px;\">";

        if (supportsAutoValues) {
            
            result += "<div style=\"position:absolute;top:0px;left:0px;width:150px;\">" +
            "<select data-id=\"suppliedBy\" style=\"width:100%;box-sizing:border-box;\"><option value=\"false\">Is Supplied By Me</option><option value=\"true\">Is System Supplied</option></select>" +
            "</div>" +
            "<div style=\"position:absolute;top:0px;left:150px;width:35px;text-align:center;height:20px;vertical-align:middle;font-size:12px;padding:5px;box-sizing:border-box;\">" +
            "AND" +
            "</div>";

        }

        result +=
        "<div style=\"position:absolute;top:0px;left:" + (supportsAutoValues ? "185" : "0") + "px;right:0px;\">" +
        "<select data-id=\"operator\" style=\"width:100%;box-sizing:border-box;\"></select>" +
        "</div>" +
        "</div>";

        result += "</div>";

        return result;

    },

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

    _configureOperatorField: function () {

        var that = this,
            items = new ProspectDirector.Web.List(this.get_options().init.operators),
            fnName = this.getRemoteValue("scalarFunctionName"),
            containsValue = true;

        items.each(function (index, item) {
            that.get_operatorField().append("<option value=\"" + item.id + "\">" + item.name + "</option>");
        });

        this.get_operatorLabel().html("Where <b>" + (fnName ? fnName : "Current Value") + "</b>");

        containsValue = this.get_operatorField().find("option[value='" + this.getValue("operatorId") + "']").length > 0

        if (containsValue) {
            this.get_operatorField().val(this.getValue("operatorId"));
        }

    },

    _configureSuppliedByField: function () {

        this.get_suppliedByField().val(this.getValue("useAutoValue") ? "true" : "false");

        this.get_suppliedByField().on("change", $.proxy(this._suppliedByField_onChange, this));

    }

});