import { FeatureBlend } from "../../FeatureBlend.js";
import { ErrorModelCollectionEventType } from "../../Models/ErrorModelCollectionEvent.js";
import { BaseView } from "../../Views/BaseView.js";
export class NavigationItem extends BaseView {
    constructor(options) {
        super(options);
        let loadErrorsSubscription = this.source.root.errors.subscribe((e) => {
            this.processValidationErrors();
        }, ErrorModelCollectionEventType.load);
        this.subscribers.push(loadErrorsSubscription);
        let clearErrorsSubscription = this.source.root.errors.subscribe((e) => {
            this.processValidationErrors();
        }, ErrorModelCollectionEventType.clear);
        this.subscribers.push(clearErrorsSubscription);
    }
    get source() {
        return super.source;
    }
    template() {
        let icon = Jade.IconSet.get("pdjs")
            .resolve("sign_warning.png", Jade.IconSetSizeSpecificDirectory.x16);
        return `<a href="#" role="tab" class="-fb-layout-tab">
                    ${this.source.name}
                    <img src="${icon}"/>
                </a>`;
    }
    select() {
        this.onSelect();
    }
    onActivate(e) {
        super.onActivate(e);
        this.node.on(Jade.BrowserEvent.CLICK, e => {
            e.cancelBubble = true;
            e.returnValue = false;
            e.stopPropagation();
            this.onSelect();
            return false;
        });
        this.m_selectEventSubscription =
            this.globals.events.navigationSelectSubscribe((e) => {
                e.id == this.source.id ?
                    this.node.addClass("-fb-selected") :
                    this.node.removeClass("-fb-selected");
            });
        this.processValidationErrors();
    }
    onDestroy(e) {
        super.onDestroy(e);
        if (this.m_selectEventSubscription != null) {
            this.m_selectEventSubscription.unsubscribe();
        }
    }
    processValidationErrors() {
        if (this.node == null) {
            return;
        }
        this.node.removeClass("-fb-error");
        Tipped.remove(this.node);
        if (this.source.errors.length === 0) {
            return;
        }
        let messages = [];
        this.source.errors.forEach(error => {
            messages[messages.length] = error.message;
        });
        this.addValidationErrorSummary(messages);
    }
    addValidationErrorSummary(messages) {
        let template = `<div class="-fb-popup-error -fb-navigation-error-tooltip">
                                    <div>Errors</div>
                                    <div>
                                        <div>${messages.join(`</div><div>`)}</div>
                                    </div>
                                </div>`;
        Tipped.create(this.node, template, {
            skin: FeatureBlend.errorTooltipSkin,
            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.globals.events.navigationSelectPublish({
            id: this.source.id
        });
    }
}
