/// class ProspectDirector.Modules.Views.FilterEditorList
/// using ProspectDirector.Types.View.FilterEditor

/**
The module for the View Filter List Editor Dialog.
@class FilterEditorList
@namespace ProspectDirector.Modules.Views
**/
ProspectDirector.Modules.Views.FilterEditorList = (function (options) {

    var 

    //---------------------------
    //--- COMPONENTS
    //---------------------------

    COMPONENTS = {

        editor: null

    },

    //---------------------------
    //--- PRIVATE MEMBERS
    //---------------------------

    PRIVATE = {

        init: function () {

            COMPONENTS.editor = new ProspectDirector.Modules.Views.FilterEditorList.Editor(options);

        }

    },

    //---------------------------
    //--- PUBLIC MEMBERS
    //---------------------------

    PUBLIC = {
    };

    PRIVATE.init();

    return PRIVATE;

});

/**
@class Editor
@namespace ProspectDirector.Modules.ViewFilterDialogList
**/
ProspectDirector.Modules.Views.FilterEditorList.Editor = ProspectDirector.Types.View.FilterEditor.extend({

    /* constructor */

    init: function (options) {

        this._super(options);

        let values = options.values || [];

        this.tree().kendoTreeView({
            dataSource: {
                data: options.items
            },
            select: this._tree_onSelect,
            template: (e) => {
                return `
                <label class="filter-editor-list-item">
                    <div><input type="checkbox" data-name="${e.item.Key}" value="${e.item.Value}" ${values.indexOf(e.item.Value) > -1 ? "checked" : ""} /></div>
                    <div>${e.item.Key}</div>
                </label>`;
            }
        });

        this.tree().data("kendoTreeView").wrapper
         .off("mouseenter mouseleave");

        this._enable();

    },

    /* controls handles */

    tree: function () {
        return this.get_dialog().find("[data-role=treeview]");
    },

    /* control event handlers */

    _okButton_onClick: function () {

        var filter = {
            enabled: this.enabled().val() !== "0",
            id: this.filterId().val(),
            operator: parseInt(this.operator().val()),
            value: this._getValue(),
            verse: this._getVerse()
        };

        this.get_dialog().data("dialog").hide({
            data: filter,
            command: "ok"
        });

    },

    _tree_onSelect: function (e) {
        e.preventDefault();
    },

    /* private methods */

    _getValue: function () {
        
        var values = [];

        if (!this.isValueOperator()) {
            return;
        }

        this.tree().find("input[type=checkbox]:checked").each(function (idx, element) {
            values[idx] = $(element).val();
        });
        
        if (values.length > 0) {
            return values.join(",");
        };

    },

    _getVerse: function () {

        var verses = [];

        if (!this.isVerseOperator()) {
            return;
        }

        this.tree().find("input[type=checkbox]:checked").each(function (idx, element) {
            verses[idx] = $(element).data("name");
        });

        if (verses.length > 0) {
            return verses.join(", ");
        };

    },

    _operator_onChange: function () {
        this._enable();
    },

    _enable: function () {

        if (this.isVerseOperator()) {
            this.tree().removeAttr("disabled");
        }
        else {
            this.tree().attr("disabled", "disabled");
        }

    },

    isVerseOperator: function () {
        return ProspectDirector.Types.View.FilterOperator.isVerseOperator(parseInt(this.operator().val()))
    },

    isValueOperator: function () {
        return ProspectDirector.Types.View.FilterOperator.isValueOperator(parseInt(this.operator().val()))
    }

});