export class PopUp extends Jade.UI.Control {
    constructor(options) {
        super(options);
        this.m_popUpCreated = false;
    }
    get anchor() {
        return this.state.get("anchor");
    }
    get height() {
        return this.state.get("height", null);
    }
    get width() {
        return this.state.get("width", 200);
    }
    get visible() {
        return !!Tipped.visible(this.anchor);
    }
    get tipped() {
        return this.state.get("tipped", {});
    }
    get onCreateCallback() {
        return this.state.get("onCreate", () => { });
    }
    template() {
        return `<div style="height:${this.height}px;width:${this.width}px;display:none;"></div>`;
    }
    show() {
        this.ensureTippedPopUp();
        Tipped.show(this.anchor);
    }
    hide() {
        Tipped.hide(this.anchor);
    }
    destroy() {
        Tipped.remove(this.anchor.get(0));
        super.destroy();
    }
    popUp_onCreate() {
        this.onCreateCallback();
    }
    ensureTippedPopUp() {
        if (this.m_popUpCreated == false) {
            this.node.detach();
            Tipped.create(this.anchor, this.node, this.getPopUpOptions());
            this.node.show();
            this.popUp_onCreate();
            this.m_popUpCreated = true;
        }
    }
    getPopUpOptions(options) {
        return _.merge({
            skin: "white",
            radius: false,
            shadow: false,
            stem: false,
            position: "bottomleft",
            showOn: false,
            hideAfter: 500,
            hideDelay: 500,
            maxWidth: this.width,
            fadeOut: 100,
            showDelay: 0,
            hideOn: "click-outside",
            hideOthers: true,
            detach: false
        }, options || {}, this.tipped);
    }
}
