class emotePanel extends panelObj{
    constructor(client, panelDocument){
        super(client, "Emote Panel", "/panel/emote", panelDocument);
    }

    docSwitch(){
        this.siteEmoteToggle = this.panelDocument.querySelector('#site-emotes-toggle');
        this.chanEmoteToggle = this.panelDocument.querySelector('#chan-emotes-toggle');
        this.personalEmoteToggle = this.panelDocument.querySelector('#personal-emotes-toggle');

        this.siteEmoteList = this.panelDocument.querySelector('#emote-panel-site-list');
        this.chanEmoteList = this.panelDocument.querySelector('#emote-panel-chan-list');
        this.personalEmoteList = this.panelDocument.querySelector('#emote-panel-personal-list');

        this.setupInput();

        this.renderEmotes(this.client.chatBox.commandPreprocessor.emotes.site, this.siteEmoteList);
        this.renderEmotes(this.client.chatBox.commandPreprocessor.emotes.chan, this.chanEmoteList);
        this.renderEmotes(this.client.chatBox.commandPreprocessor.emotes.personal, this.personalEmoteList);
    }

    setupInput(){
        //Make sure to remove any event listeners in-case we moving an already instantiated panel
        this.siteEmoteToggle.removeEventListener("click", this.toggleSiteEmotes.bind(this));
        this.siteEmoteToggle.addEventListener("click", this.toggleSiteEmotes.bind(this));

        this.chanEmoteToggle.removeEventListener("click", this.toggleChanEmotes.bind(this));
        this.chanEmoteToggle.addEventListener("click", this.toggleChanEmotes.bind(this));

        this.personalEmoteToggle.removeEventListener("click", this.togglePersonalEmotes.bind(this));
        this.personalEmoteToggle.addEventListener("click", this.togglePersonalEmotes.bind(this));
    }

    toggleSiteEmotes(event){
        this.toggleEmotes(this.siteEmoteToggle, this.siteEmoteList);
    }

    toggleChanEmotes(event){
        this.toggleEmotes(this.chanEmoteToggle, this.chanEmoteList);
    }

    togglePersonalEmotes(event){
        this.toggleEmotes(this.personalEmoteToggle, this.personalEmoteList);
    }

    toggleEmotes(icon, list){
        if(list.checkVisibility()){
            icon.classList.replace('bi-caret-down-fill','bi-caret-left-fill');
            list.style.display = 'none';
        }else{
            icon.classList.replace('bi-caret-left-fill', 'bi-caret-down-fill');
            list.style.display = 'grid';
        }
    }

    useEmote(emote){
        //If we're using this from the active panel
        if(client.cPanel.activePanel == this){
            //Close it
            this.client.cPanel.hideActivePanel();
        }

        //Add the emote to the chatbox prompt
        this.client.chatBox.chatPrompt.value += `[${emote}]`;
    }

    renderEmotes(emoteList, container){
        //Clear out the container
        container.innerHTML = '';

        //For each emote
        emoteList.forEach((emote) => {
            //Create div to hold emote
            const emoteDiv = document.createElement('div');
            emoteDiv.classList.add('emote-panel-list-emote');

            //If the emote is an image
            if(emote.type == 'image'){
                //Create image node
                var emoteMedia = document.createElement('img');
            //if emote is a video
            }else if(emote.type == 'video'){
                //create video node
                var emoteMedia = document.createElement('video');
                //Set video properties
                emoteMedia.autoplay = true;
                emoteMedia.muted = true;
                emoteMedia.controls = false;
                emoteMedia.loop = true;
            }

            //set media link as source
            emoteMedia.src = emote.link;
            //Set media class
            emoteMedia.classList.add('emote-list-media');

            //Create paragraph tag
            const emoteTitle = document.createElement('p');
            //Set title class
            emoteTitle.classList.add('emote-list-title');
            //Set emote title
            emoteTitle.innerHTML = `[${emote.name}]`;
            
            //Add the emote media to the emote span
            emoteDiv.appendChild(emoteMedia);
            //Add title paragraph node
            emoteDiv.appendChild(emoteTitle);

            //Add useEmote event listener
            emoteDiv.addEventListener('click', ()=>{this.useEmote(emote.name)});

            //Append the mote span to the emote list
            container.appendChild(emoteDiv);
        })
    }
}