/// class PD.Manage.ModuleTabStripTab
// using PD.Web.UI.Controls.TabStripTab

PD.Manage.ModuleTabStripTab =
PD.Web.UI.Controls.TabStripTab.extend({

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

    _contextMenu: null,
    _context: null,
    _data: null,

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

    get_moduleId: function () {
        return this._context.id;
    },

    get_tooltip: function () {
        return this._data.get("tooltip") != null ? this._data.get("tooltip") : this.get_tooltipDefault();
    },

    get_tooltipDefault: function () {
        return "Module";
    },

    get_label: function () {
        return this._data.get("label");
    },

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

    onInit: function () {
        this._data = this.get_options().context();
        this._context = this._data.toJSON();
    },

    onFrame: function (e) {
        this.setFrame(this._context);
    },

    onActivate: function (e) {
        var that = this;
        this.get_node().find(".-pd-close").on("click", $.proxy(this.onClose, this));
        this._activateContextMenu();
        this._data.on("change:hasChanges", function (model, value) {

            if (value === true) {
                that.get_node().find("[data-id=asterik]").show();
            }
            else {
                that.get_node().find("[data-id=asterik]").hide();
            }

        });
        this._data.on('change:label', function (model, label) {
            that.get_node().find("[data-id=label]").text(label);
        });
        if (this.get_tooltip() != null) {
            this._createToolTip();
        }
    },

    onClick: function () {
        Tipped.hide(this.get_node());
        PD.context.get_global().get_events().publish("Module:Focus", this.get_moduleId());
    },

    onClose: function (e) {
        Tipped.hide(this.get_node());
        e.preventDefault();
        e.stopPropagation();
        PD.context.get_global().get_events().publish("Module:Unload", this.get_moduleId());
    },

    destroy: function () {
        this.get_node().remove();
        this._removeToolTip();
    },

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

    template: function (e) {
        return [
            "<a href='" + e.route + "' data-module-id='" + e.id + "' class='-pd-tab' style='border-top-color:" + e.color + "'>",
            "<div class='-pd-tab-menu-ddl'></div>",
            "<span data-id='label'>",
            e.label ? e.label : "",
            "</span>",
            "<span data-id='asterik' style='display:none;text-decoration:none;'>&nbsp;*</span>",
            "<div class='-pd-close' style='display:" + (e.allowClose ? "inline-block" : "none") + "'></div>",
            "<ul data-id='tab-strip-menu'></ul>",
            "</a>"
        ]
    },

    _activateContextMenu: function () {

        var that = this;

        this._contextMenu = new PD.Web.UI.Controls.ContextMenu({
            target: this.get_node().find(".-pd-tab-menu-ddl"),
            open: function () {
                Tipped.hide(that.get_node());
            },
            showOn: "click",
            direction: "bottom",
            alignToAnchor: true,
            segments: [
                new PD.Manage.ModuleTabStripTabContextMenuSegment(function (e) {
                    return that.get_options().context();
                })
            ]
        });

        this.get_children().add(this._contextMenu);

    },

    _createToolTip: function () {

        Tipped.create(this.get_node(), `<div class="-pd-module-tab-tooltip "><label>${this.get_label()}</label>${this.get_tooltip()}</div>`, {
            skin: "white",
            stem: false,
            position: { target: "bottomleft", tooltip: "topleft" },
            offset: { y: 4 },
            showDelay: 750,
            onShow: (content, element) => {
                if (this._contextMenu.get_isVisible()) {
                    Tipped.hide(this.get_node());
                }
            }
        });

    },

    _removeToolTip: function () {
        Tipped.remove(this.get_node());
    }

});