class PragmaAppBar extends HTMLElement {

    constructor() {
        super();

        this.buttonClickHandler = this.onButtonClick.bind(this);
        this.assistButtonClickHandler = this.onAssistButtonClick.bind(this);
        this.menuButton = null;
        this.assistButton = null;
    }

    connectedCallback() {
        this.initTemplate();

        this.menuButton = this.querySelector("#app-bar-button");
        this.assistButton = this.querySelector("#assistant-button");

        this.menuButton.addEventListener('click', this.buttonClickHandler);
        this.assistButton.addEventListener("click", this.assistButtonClickHandler);
    }

    onButtonClick() {
        const menu = document.querySelector('pragma-menu');

        if (menu)
            menu.toggle();
    }

    onAssistButtonClick() {
        const assistant = document.querySelector("assistant");

        if(assistant)
            assistant.classList.toggle("close");
    }

    disconnectedCallback() {
        this.menuButton.removeEventListener("click", this.buttonClickHandler);
        this.assistButton.removeEventListener("click", this.assistButtonClickHandler);

        this.buttonClickHandler = null;
        this.assistButtonClickHandler = null;
    }

    initTemplate() {
        const instance = document.importNode(window.templates.get("pragma-appbar"), true);
        this.appendChild(instance);
    }
}

customElements.define('pragma-appbar', PragmaAppBar);