import { PopUp } from "../PopUp/PopUp.js";
import { NavigationOverflowItem } from "./NavigationOverflowItem.js";
import { FeatureBlend } from "../../FeatureBlend.js";
export class NavigationOverflow extends Jade.UI.Control {
    constructor(options) {
        super(options);
    }
    get anchor() {
        return this.state.get("anchor");
    }
    get imageNode() {
        return this.node.children("img");
    }
    get menu() {
        return this.m_menu;
    }
    set menu(value) {
        this.m_menu = value;
    }
    get menuNode() {
        return this.node.children("div[role=menu]");
    }
    template() {
        return `<div class="-fb-layout-nav-overflow">
                    <div role="menu">
                        <img src="${this.getIcon("ellipsis_vertical.png")}"/>
                    </div>
                </div>`;
    }
    onActivate(e) {
        super.onActivate(e);
        this.node.on(Jade.BrowserEvent.CLICK, _.bind(this.onClick, this));
        this.createMenu();
        this.show();
        this.hide();
    }
    update(items) {
        this.createMenu();
        items.forEach(item => {
            let newItem = new NavigationOverflowItem({
                source: item.source,
                click: () => {
                    this.menu.hide();
                }
            });
            this.menu.controls.add(newItem);
        });
    }
    show() {
        this.node.show();
    }
    hide() {
        this.node.hide();
    }
    onDestroy(e) {
        super.onDestroy(e);
        this.menu.destroy();
    }
    createMenu() {
        if (this.menu) {
            this.menu.destroy();
            this.menu = null;
        }
        this.menu = new PopUp({
            anchor: this.menuNode,
            width: 250,
            tipped: {
                skin: FeatureBlend.defaultPopUpSkin,
                position: {
                    target: "bottomright",
                    tooltip: "topright"
                },
                offset: {
                    y: 4,
                    x: 1
                },
                padding: false
            }
        });
        this.controls.add(this.menu);
        this.menu.node.addClass("-pdjs-shared-ui-controls-toolbar-menu");
    }
    onClick(e) {
        this.menu.visible ?
            this.menu.hide() :
            this.menu.show();
    }
    getIcon(icon) {
        return Jade.IconSet.get("pdjs")
            .resolve(icon, Jade.IconSetSizeSpecificDirectory.x16);
    }
}
