css(`
    options-menu {
        position: absolute;
        right: -.5em;
        top: -.3em;
        width: 0;
        height: 0;
        background-color: var(--orange);
        opacity: 30%;
        transition: width 0.2s, height 0.2s;
        border-radius: 12px;
    }

    options-menu * {
        transition: opacity 0.3s;
    }

    options-menu.closed * {
        opacity: 0;
    }

    options-menu.open {
        width: 10em;
        height: 15em;
        display: block;
    }

    options-menu.open * {
        opacity: 100%;
    }
`)

export default class OptionsMenu extends HTMLElement {

    connectedCallback() {
        this.render()

        util.observeClassChange(this, (cl) => {
            this.render()
        })
        
    }

    render() {
        if(this.classList.contains("open")) {
            setTimeout(() => {
                this.innerHTML = /* html */`
                    <a href="signout" style="position: absolute; left: 0px; color: white; z-index: 2">sign out</a>
                `
            }, 200)
        } else {
            this.innerHTML === ""
        }
    }

    logout() {
        fetch('/signout', { method: 'GET', credentials: 'include' })
            .then(() => {
            // Force a clean full-page reload of "/"
            window.location.replace('/?loggedout');
            });
    }
}

customElements.define("options-menu", OptionsMenu)