/// 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,
    _subcription: null,

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

    get_moduleId: function () {
        return this._data.get("id");
    },
    set_moduleId: function (value) {
        return this._data.set("id", value);
    },

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

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

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

    get_hasChanges: function () {
        return this._data.get("hasChanges");
    },
    set_hasChanges: function (value) {
        return this._data.set("hasChanges", value);
    },

    get_route: function () {
        return this._data.get("route");
    },
    set_route: function (value) {
        return this._data.set("route", value);
    },

    //===================================
    // 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);
        });

        this._data.on('change:id', function (model, value) {
            that.get_node().attr("data-module-id", value);
        });

        this._data.on('change:route', function (model, value) {
            that.get_node().attr("href", value);
        });

        if (this.get_tooltip() != null) {
            this._createToolTip();
        }

        this._subcription = PDJS.Manage.EventsHub.moduleChangeDataSubscribe((e) => {
            if (e.id === this.get_moduleId() || e.newId === this.get_moduleId()) {
                this.onTabUpdate(e);
            }
        });

    },

    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());
        if (this._subcription) {
            this._subcription.unsubscribe();
        }
    },

    onTabUpdate: function (e) {

        if (e.asterik !== undefined) {
            this.set_hasChanges(e.asterik);
        }

        if (e.label !== undefined) {
            this.set_label(e.label);
        }

        if (e.route !== undefined) {
            this.set_route(e.route);
        }

        if (e.newId !== undefined) {
            this.set_moduleId(e.newId);
            this
        }

        if (e.tooltip !== undefined) {
            this.set_tooltip(e.tooltip);
            this._removeToolTip();
            this._createToolTip();
        }

    },

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

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

    template: function (e) {
        return [
            "<a href='" + e.route + "' data-module-id='" + e.uid + "' 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());
    }

});