import ProfileMenu from "./ProfileMenu.js"

css(`
    profile-button {
        display: block;
        width: 1.5em
    }
`)

export default class ProfileButton extends HTMLElement {
    hovered = false

    connectedCallback() {
        this.render()

        document.addEventListener("mousemove", (e) => {
            this.previousHovered = this.hovered
            if(e.target.closest("profile-button")) {
                this.hovered = true
            } else {
                this.hovered = false
            }
            if(this.hovered !== this.previousHovered) {
                if(this.hovered === true) {
                    this.render()
                    setTimeout(() => {
                        this.querySelector("profile-menu").className = "open"
                    })
                } else {
                    this.querySelector("profile-menu").className = "closed"
                    setTimeout(() => {
                        this.render()
                    }, 140)
                }
            }
        })
    }

    render() {
        this.innerHTML = /* html */`
            <svg  style="position: absolute;" viewBox="0 0 88 124" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path opacity="0.998" d="M42.4512 2.00195C52.1659 2.22835 61.398 4.45649 70.166 8.69238L70.3818 8.79688L70.6162 8.84668C72.5686 9.26638 74.537 9.47923 76.5195 9.48535C76.5062 11.0178 76.3492 12.5388 76.0479 14.0508C74.4195 16.4705 72.6152 18.7571 70.6279 20.9072L69.8799 21.7168L70.1641 22.7812C71.785 28.8491 72.6458 35.0483 72.7471 41.3818L72.7549 41.8369L72.958 42.2432C74.3564 45.0408 75.7681 47.8651 77.1934 50.7148C76.401 51.7697 75.5014 52.7412 74.4893 53.6279L73.8906 54.1533L73.8164 54.9463C73.2326 61.1851 71.2275 66.786 67.8037 71.7871C66.3409 71.9333 64.8778 72.0802 63.415 72.2266C61.648 72.4034 59.8809 72.5803 58.1143 72.7568L56.9131 72.877L56.46 73.9951C55.1158 77.3095 54.9178 80.7587 55.8496 84.2715L55.9658 84.708L56.2578 85.0527C58.3856 87.5622 60.8538 89.6502 63.6553 91.3105L63.7783 91.3838L63.9102 91.4385C70.6068 94.2094 77.192 97.0352 83.665 99.9141C72.8406 106.409 62.2808 113.347 51.9873 120.731C49.5114 121.96 46.9641 122.264 44.2627 121.648C30.7653 112.891 16.9807 104.63 2.91113 96.8623C2.98649 96.7878 3.06425 96.7148 3.14453 96.6436C9.6346 94.2535 15.6931 91.0299 21.3154 86.9707L21.5225 86.8213L21.6855 86.625C23.5522 84.3704 24.9161 81.8385 25.7686 79.041L25.8184 78.877L25.8398 78.7061C26.5676 72.8871 26.5676 67.0651 25.8398 61.2461L25.7744 60.7236L25.4609 60.3018C16.1326 47.7366 13.0625 33.9256 16.21 18.7246C21.8795 8.29751 30.5529 2.76795 42.4512 2.00195Z" 
                    fill="${this.hovered ? window.getColor("orange") : window.getColor("periwinkle")}" fill-opacity="0.36" stroke="${this.hovered ? window.getColor("orange") : window.getColor("periwinkle")}" stroke-width="4"/>
            </svg>
            <profile-menu class="closed"></profile-menu>
        `
    }
}

customElements.define("profile-button", ProfileButton)