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

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

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

    _grid: null,
    _selection: null,

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

    get_grid: function () {
        return this._grid;
    },

    get_gridNode: function () {
        return this.get_container().find("DIV[data-role=grid]");
    },
    
    //==============================
    // INITIALIZERS
    //==============================

    _init_grid: function () {

        var data = this.getValue("documentTypes");

        this._grid = this.get_gridNode().kendoGrid({
            autoBind: false,
            resizable: true,
            height: "100%",
            columns: [
                {
                    field: "name",
                    title: "Document Type",
                    width: "250px"
                },
                {
                    field: "category",
                    title: "Document Category"
                }
            ]
        }).data("kendoGrid");

        this._selection = new ProspectDirector.Web.UI.Utilities.Kendo.GridSelection({
            grid: this.get_grid(),
            primaryKey: "id",
            selection: {
                mode: "multiple"
            },
            change: $.proxy(this._grid_onChange, this),
            message: function (sender, e) {

                if (e.recordCount === 0) {
                    sender.addMessage("No document types selected.");
                }
                else {
                    sender.removeMessage();
                }

            }
        });

        this.get_grid().dataSource.data(data.types);

        this.get_gridNode().disableTextSelection();

    },

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

    _addButton_onClick: function () {

        var that = this;

        PDJS.Shared.DocumentTypes.DocumentTypeBrowserDialog.open({
            viewCustomId: PDJS.Services.Views.BuiltInViews.DOCUMENT_TYPE_SELECTION,
            selectionMode: PD.Web.UI.Controls.GridSelectionMode.multiple,
            callbacks: {
                ok: function (sender, e) {
                    that._addSelections(e);
                }
            }
        });

    },

    _removeButton_onClick: function () {

        var grid = this.get_grid(),
            selections = this.get_gridNode().find(".k-state-selected");

        $(selections).each(function (index, item) {
            grid.removeRow(item);
        });

        this._selection.get_selections().clear()
        this.updateValue();
        this.get_eventBus().publish("reload-target", true);

    },

    _clearButton_onClick: function () {

        this.get_grid().dataSource.data([]);
        this.get_grid().refresh();
        this.updateValue();
        this.get_eventBus().publish("reload-target", true);

    },

    _checkBox_onClick: function (e) {
        this.updateValue();
    },

    _grid_onChange: function (e) {
        this._buildToolBar();
    },

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

    activate: function () {

        this._init_grid();
        this._buildToolBar();
        this.get_element().parent().css({
            overflow: "hidden"
        });

    },

    render: function () {

        var result = "" +

        "<div id=\"" + this.getId() + "\" style=\"margin:10px;position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box;\">" +
            "<div class=\"-pd-macro-editor-description\" style='position:absolute;top:0;right:0;left:0;height:36px;box-sizing:border-box;'>" +
                "Select the document types you are interested in visualizing. All data for the document types you select will be available for inclusion within your results." +
            "</div>" +
            "<div data-role=\"toolbar\" style=\"position:absolute;top:40px;right:0;left:0;height:30px;box-sizing:border-box;\"></div>" +
            "<div data-role=\"grid-wrapper\"  style=\"position:absolute;top:76px;right:0;left:0;bottom:3px;box-sizing:border-box;\">" +
                "<div data-role=\"grid\"></div>" +
            "</div>" +
        "<div>";

        return result;

    },
    
    //==============================
    // PRIVATE METHODS
    //==============================

    _addSelections: function (e) {

        var index = 0,
            grid = this.get_grid(),
            items = new ProspectDirector.Web.List(e);

        items.each(function (index, item) {

            if (!grid.dataSource.get(item.id)) {

                grid.dataSource.add({
                    id: item.id,
                    name: item.name,
                    category: item.category
                });

            }

        });

        grid.refresh();

        this.updateValue();

    },

    updateValue: function () {

        var data = this.get_grid().dataSource.data();

        this.setValue("documentTypes", {
            types: data.toJSON()
        });

        this._buildToolBar();

    },

    _buildToolBar: function () {

        var toolbarNode = this.get_element().find("DIV[data-role=toolbar]"),
            buttons = new ProspectDirector.Web.List(),
            that = this;

        buttons.add({
            toolTip: "Add",
            icon: "ADD.PNG",
            command: $.proxy(this._addButton_onClick, this),
        });

        buttons.add({
            toolTip: "Remove",
            icon: "DELETE.PNG",
            command: $.proxy(this._removeButton_onClick, this),
            disabled: this._selection.get_selections().count() === 0
        });

        buttons.add({
            toolTip: "Clear",
            icon: "ERASER2.PNG",
            command: $.proxy(this._clearButton_onClick, this)
        });

        toolbarNode.empty();

        new ProspectDirector.Web.UI.Controls.ToolBar({
            container: toolbarNode,
            items: buttons.toArray()
        });

    }

});