class HelpEntry extends HTMLElement{
    constructor(title, description){
        super();
        this.title = title;
        this.description = description;
    }

    displayPopup(){
        this.getElementsByTagName("sea-help-popup")[0].style.visibility = "visible";
    }

    hidePopup(){
        this.getElementsByTagName("sea-help-popup")[0].style.visibility = "hidden";
    }

    toggleVisibility(){
        if (this.getElementsByTagName("sea-help-popup")[0].style.visibility == "visible")
            this.hidePopup();
        else
            this.displayPopup();
    }

    connectedCallback(){
        this.render();
        this.getElementsByTagName("img")[0].onmouseenter = () => {this.displayPopup();};
        this.getElementsByTagName("img")[0].onmouseleave = () => {this.hidePopup();};
        // For mobile phones
        this.getElementsByTagName("img")[0].onclick = () => {this.toggleVisibility();};
    }

    render(){
        this.innerHTML = `
        <link rel="stylesheet" href="components/help_entry/help_entry.css">
        <div class="help-entry">
            <span class="help-entry-title">${this.title}</span>
            <img src="res/question_mark.png" class="help-entry-question-mark">     
        </div>
        <sea-help-popup style="visibility:hidden;" helptitle="${this.title}" helpdescription="${this.description}"></sea-help-popup>
        `;
    }
}

customElements.define("sea-help-entry", HelpEntry);