class MenuPopup extends HTMLElement{
    constructor(){
        super();
        this.entries = [new HorizontalDivider()]
    }

    hide(){
        this.style.visibility = "hidden";
    }

    show(){
        this.style.visibility = "visible";
    }

    getContainer(){
        return this.getElementsByClassName("menu")[0];
    }

    addEntry(entry){
        this.entries.push(entry);
    }

    addHorizontalDivider(){
        this.entries.push(new HorizontalDivider());
    }

    connectedCallback(){
        this.render();        
        this.hide();
        this.getElementsByClassName("menu-title-container")[0].getElementsByTagName("img")[0].onclick = () => {this.hide()};
    }

    render(){
        this.innerHTML = `
        <link rel="stylesheet" href="components/menu_popup/menu_popup.css">
        <div class="menu">
            <div class="menu-title-container">
                <span>Menu</span>
                <img src="res/close.png">
            </div>
        </div>
        `;
        let menuContainer = this.getElementsByClassName("menu")[0];
        for (let entry of this.entries){
            menuContainer.appendChild(entry);
        }
    }
}

customElements.define("sea-menu", MenuPopup);