/// class ProspectDirector.Web.UI.Canvas.Charts.ChartConstraintsFeature
/// using ProspectDirector.Web.UI.FeatureSets.MacroEditorBase

/**
@class ChartConstraintsFeature
@constructor
@namespace Web.UI.Canvas.Charts
@extends Web.UI.FeatureSets.MacroEditorBase
**/
ProspectDirector.Web.UI.Canvas.Charts.ChartConstraintsFeature = ProspectDirector.Web.UI.FeatureSets.MacroEditorBase.extend({

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

    _editor: null,
    _toolBar: null,

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

    _editor_onChange: function (e, data) {
        this._toolBar.load(data.selection);
    },

    _editor_onModify: function (e, data) {
        this.setValue("constraints", this._editor.getConstraints());
    },

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

    _featureSet_onChange: function (e, data) {

        var isApplicable = data.key === "templateId" || data.key === ""

        if (data.key === "") {
            this._setQueryParameters();
        }

    },

    //==============================
    // OVERRIDDEN METHODS
    //==============================

    activate: function () {

        this._editor = new ProspectDirector.Web.UI.Queries.ConstraintsEditor({
            container: this.get_element().find("DIV[data-role=treeview-wrapper]"),
            condition: this.getValue("constraints"),
            featureSet: this.get_featureSet(),
            change: $.proxy(this._editor_onChange, this),
            modify: $.proxy(this._editor_onModify, this)
        });

        this._toolBar = new ProspectDirector.Web.UI.Queries.ConstraintsEditorToolBar({
            container: this.get_element().find("DIV[data-role=toolbar]"),
            editor: this._editor,
            featureSet: this.get_featureSet()
        });

    },

    render: function () {

        var result = "" +
        "<div id=\"" + this.getId() + "\" style=\"padding:10px;position:relative;\">" +
            "<div class=\"-pd-macro-editor-description\">" +
            "Constraints allow you to retrieve the appropriate records for populating this chart via the addition of conditions and filters. Click \"Add...\" below to begin adding constraints." +
            "</div>" +
            "<div data-role=\"toolbar\" style=\"height:30px;margin-bottom:5px;\"></div>" +
            "<div data-role=\"treeview-wrapper\" style=\"overflow:hidden;\">" +
            "</div>" +
        "<div>";

        return result;

    },

    size: function (e) {

        var wrapper = this.get_element().find("DIV[data-role=treeview-wrapper]");

        this.get_element().height(e.height);
        this.get_element().width(e.width);

        wrapper.width(e.width - 2);
        wrapper.height(e.height - 76);

    }

});
