import { FeatureBlendEvents } from "../../Events.js";
import { BaseView } from "../../Views/BaseView.js";
export class PanelTab extends BaseView {
    constructor(options) {
        super(options);
        this.m_groupModel = options.model;
        this.state.unset("model");
        this.eventBus.subscribe(FeatureBlendEvents.ErrorsLoad, () => {
            this.processValidationErrors();
        });
    }
    get label() {
        return this.state.get("label");
    }
    get tabId() {
        return this.state.get("tabId");
    }
    get groupModel() {
        return this.m_groupModel;
    }
    get imgNode() {
        return this.node.children("img");
    }
    template() {
        let icon = Jade.IconSet.get("pdjs")
            .resolve("sign_warning.png", Jade.IconSetSizeSpecificDirectory.x16);
        return `<a href="#" role="tab">
                    ${this.label}
                    <img src="${icon}"/>
                </a>`;
    }
    select() {
        this.onSelect();
    }
    onActivate(e) {
        super.onActivate(e);
        this.node.on(Jade.BrowserEvent.CLICK, e => {
            this.onSelect();
        });
        this.m_selectEventSubscription =
            this.eventBus.subscribe("feature-blend:tab:select", () => {
                this.node.removeClass("-fb-selected");
            });
        this.processValidationErrors();
    }
    onDestroy(e) {
        super.onDestroy(e);
        if (this.m_selectEventSubscription != null) {
            this.m_selectEventSubscription.unsubscribe();
        }
    }
    processValidationErrors() {
        this.node.removeClass("-fb-error");
        Tipped.remove(this.node);
        if (this.groupModel.errors.length === 0) {
            return;
        }
        let messages = [];
        this.groupModel.errors.forEach(error => {
            messages[messages.length] = error.message;
        });
        this.addValidationErrorSummary(messages);
    }
    addValidationErrorSummary(messages) {
        let template = `<div class="-fb-tablayout-tooltip">
                                    <div>Errors</div>
                                    <div>
                                        <div>${messages.join(`</div><div>`)}</div>
                                    </div>
                                </div>`;
        Tipped.create(this.node, template, {
            skin: "white-no-padding",
            showOn: "mouseenter",
            hideOnClickOutside: true,
            showDelay: 500,
            hideAfter: 500,
            hideDelay: 0,
            position: {
                target: "topmiddle",
                tooltip: "bottommiddle"
            },
            offset: {
                y: -5,
                x: 0
            },
            detach: false,
            stem: true,
            maxWidth: 300,
            onShow: () => {
            }
        });
        this.node.addClass("-fb-error");
    }
    onSelect() {
        this.eventBus.publish("feature-blend:tab:select", this.tabId);
        this.node.addClass("-fb-selected");
    }
}
