class Control extends HTMLElement{

    constructor(imgSrcMain, imgSrcAlt, tooltipDescription, callbackMain, callbackAlt = undefined){
        super();
        this.imgSrcMain = imgSrcMain;
        this.imgSrcAlt = imgSrcAlt;
        this.tooltipDescription = tooltipDescription;
        this.callbackMain = callbackMain;
        this.callbackAlt = callbackAlt;
    }

    changeToMain(){
        this.permute("control-global-alt", "control-global-main");
    }

    changeToAlt(){
        this.permute("control-global-main", "control-global-alt");
    }

    permute(from, to){
        let fromElm = this.getElementsByClassName(from)[0];
        let toElm = this.getElementsByClassName(to)[0];

        fromElm.classList.remove("control-global-active");
        toElm.classList.remove("control-global-inactive");
        
        fromElm.classList.add("control-global-inactive");    
        toElm.classList.add("control-global-active");

        this.getAnimations()
    }

    connectedCallback(){
        this.render();
        this.getElementsByClassName("control-global-active")[0].onclick = this.callbackMain;
        if (this.callbackAlt !== undefined){
            let altElm = this.getElementsByClassName("control-global-inactive")[0];
            altElm.onclick = this.callbackAlt;
            altElm.classList.add("animated");
        }
    }

    render(){
        this.innerHTML = `
        <link rel="stylesheet" href="components/control/control.css">
        <div class="tooltip">
            <img class="control-global control-global-main control-global-active animated" src="${this.imgSrcMain}"/>
            <img class="control-global control-global-alt control-global-inactive" src="${this.imgSrcAlt}"/>
            <span class="tooltiptext">${this.tooltipDescription}</span>
        </div>
        `;

    }
}

customElements.define("sea-control", Control)