import "./ProfileMenu.js"

class ProfileButton extends Shadow {

    async render() {
        ZStack(async () => {
            img("/_/icons/profile.svg", "1.5em", "1.5em")
                .backgroundColor("var(--accent)")
                .padding(0.2, em)
                .borderRadius(5, px)

            ProfileMenu()

        })
        .display("block")
        .onAppear(() => {
            window.addEventListener("mousedown", (e) => { // bad - adding every time it renders
                if(!e.target.closest("profilebutton-")) {
                    this.$("profile-menu").style.display = "none"
                }
            })
        })
        .onHover((hovering, e) => {
            console.log(hovering)
            console.log(e.target)
            if(hovering && !e.target.closest("profile-menu")) {
                this.$("img").backgroundColor("var(--accent)")
                this.$("img").style.outline = "1px solid black"
            } else if(!e.target.closest("profile-menu")) {
                this.$("img").backgroundColor("")
                this.$("img").style.outline = ""
            }
        })
        .onClick((done) => {
            console.log(done)
            if(done) {
                this.$("profile-menu").style.display = ""
            }
        })
    }
}

register(ProfileButton)