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

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

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

    _operatorList: null,

    //==============================
    // CONSTRUCTOR
    //==============================

    init: function (options) {
        this._super(options);
        this._operatorList = new ProspectDirector.Web.List(this.get_options().init["operators"]);
    },

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

    get_operatorList: function () {
        return this._operatorList;
    },

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

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

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

    get_operatorWrapper: function () {
        return this.get_container().find("DIV[data-id=operators]");
    },

    get_valueWrapper: function () {
        return this.get_container().find("DIV[data-id=value]");
    },

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

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

    _operatorNode_onChange: function (e) {

        var id = this.get_operatorNode().val();

        this.setValue("operatorId", id);

        this._handleOperatorType(id);

    },

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

    activate: function () {

        var operatorId = this.getValue("operatorId");

        this.get_supplierNode().on("change", $.proxy(this._supplierNode_onChange, this));
        this.get_operatorNode().on("change", $.proxy(this._operatorNode_onChange, this));
        this.get_operatorNode().val(operatorId);
        this._handleOperatorType(operatorId);

    },

    render: function (content) {

        var $result = $("<div id=\"" + this.getId() + "\" style=\"padding:10px 10px 0px 10px;\"></div>"),
            $operators = $("<div data-id=\"operators\" style=\"padding: 0px 0px 10px 0px;height:20px;position:relative;\"></div>"),
            $value = $("<div data-id=\"value\"></div>"),
            supportsAutoValues = this.get_options().init["supportsAutoValues"];

        if (supportsAutoValues) {
            $operators.append(this._renderSupplierNode());
        }

        $operators.append(this._renderOperatorNode(supportsAutoValues));

        $value.append(content);

        $result.append(this._renderOperatorLabel());

        $result.append($operators);

        $result.append($value);

        return $result[0].outerHTML;

    },

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

    _renderOperatorLabel: function () {
        var label = this.getRemoteValue("scalarFunctionName");
        return "<label style=\"font-size:12px;\">Where <b>" + (label ? label : "Current Value") + "</b></label><br/>";
    },

    _renderSupplierNode: function () {

        var $result = $("<div></div>"),
            $select = $("<select data-id=\"supplier\"></select>"),
            $text = $("<div>AND</div>"),
            useAutoValue = this.getValue("useAutoValue");

        $result.css({
            position: "absolute",
            top: "0px",
            left: "0px",
            width: "150px"
        });

        $select.css({
            width: "100%",
            boxSizing: "border-box"
        });
        $select.append("<option value=\"false\">Is Supplied By Me</option>");
        $select.append("<option value=\"true\" " + (useAutoValue ? "selected" : "")  + ">Is Supplied By System</option>");

        $text.css({
            position: "absolute",
            top: "0px",
            left: "150px",
            height: "20px",
            width: "35px",
            textAlign: "center",
            verticalAlign: "middle",
            fontSize: "12px",
            padding: "5px",
            boxSizing: "border-box"
        });

        $result.append($select);
        $result.append($text);

        return $result;

    },

    _renderOperatorNode: function (supportsAutoValues) {

        var $result = $("<div></div>"),
            $select = $("<select data-id=\"operator\"></select>");

        $result.css({
            position: "absolute",
            top: "0px",
            right: "0px",
            left: (supportsAutoValues ? "185" : "0") + "px"
        });

        $select.css({
            width: "100%",
            boxSizing: "border-box"
        });

        this.get_operatorList().each(function (index, item) {
            $select.append("<option value=\"" + item.id + "\">" + item.name + "</option>");
        });

        $result.append($select);

        return $result;

    },

    _handleOperatorType: function (id) {

        var that = this;

        this.get_operatorList().each(function (index, item) {

            if (item.id == id) {

                if (item.isNullOperator) {
                    that.get_valueWrapper().hide();
                }
                else {
                    that.get_valueWrapper().show();
                }

                return false;

            }

        });

    }

});