/// class PD.Manage.Modules.OverviewArea
// using PD.Web.UI.Controls.Control

PD.Manage.Modules.OverviewArea =
PD.Web.UI.Controls.Control.extend({

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

    _panel: null,
    _grid: null,
    _toggle: null,
    _description: null,

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

    onInit: function (e) {

        this._initToggle();
        this._initGrid();
        this._initPanel();
        this._initDescription();

    },

    onActivate: function () {
        this._toggle.select("panel");
    },

    //===================================
    // PUBLIC METHODS
    //===================================
    
    load: function (data) {
        this._grid.load(data);
        this._panel.load(data);
    },

    //===================================
    // PROTECTED METHODS
    //===================================

    template: function () {
        return `<div class="-pd-overview-area">
                    <div class="-pdjs-manage-module-section-title -pd-overview-area-title" style="padding:0 10px 0 10px;">
                        Modules
                    </div>
                    <div class="-pd-overview-area-content"></div>
                </div>`;
    },

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

    _initToggle: function () {

        var that = this;

        this._toggle = new PD.Manage.Modules.OverviewToggle({
            insertAt: ".-pd-overview-area-title",
            click: function (e) {

                var $panel = that.get_node().find(".-pd-overview-area-panel-container");

                if (e.id === "grid") {
                    that._panel.hide();
                    that._grid.show();
                }
                else {
                    that._grid.hide();
                    that._panel.show();
                }

            }
        });

        this.get_children().add(this._toggle);

    },

    _initGrid: function () {

        var that = this;

        this._grid = new PD.Manage.Modules.OverviewGrid({
            insertAt: ".-pd-overview-area-content",
            select: function (e) {
                if (e.module) {
                    that._description.load(e.module.label, e.module.description);
                }
            }
        });

        this.get_children().add(this._grid);

    },

    _initPanel: function () {

        var that = this;

        this._panel = new PD.Manage.Modules.OverviewPanel({
            insertAt: ".-pd-overview-area-content",
            select: function (e) {
                if (e.module) {
                    that._description.load(e.module.label, e.module.description);
                }
            }
        });

        this.get_children().add(this._panel);

    },

    _initDescription: function () {

        this._description = new PD.Manage.Modules.OverviewDescription({
        });

        this.get_children().add(this._description);

    }

});