/*Canopy - The next generation of stoner streaming software
Copyright (C) 2024  Rainbownapkin and the TTN Community

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.*/

class userList{
    constructor(client){
        //Client object
        this.client = client

        //Click Dragger Object
        this.clickDragger = new canopyUXUtils.clickDragger("#chat-panel-users-drag-handle", "#chat-panel-users-div");
        
        //Strings
        this.userColors = [
            "userlist-color0",
            "userlist-color1",
            "userlist-color2",
            "userlist-color3", 
            "userlist-color4",
            "userlist-color5",
            "userlist-color6"];
        
        //Maps
        this.colorMap = new Map();

        //Element Nodes
        this.userDiv = document.querySelector("#chat-panel-users-div");
        this.userList = document.querySelector("#chat-panel-users-list-div");
        this.userCount = document.querySelector("#chat-panel-user-count");
        this.toggleIcon = document.querySelector("#chat-panel-users-toggle");

        //Call setup functions
        this.setupInput();
        this.defineListeners();
    }

    //Setup functions
    setupInput(){
        this.toggleIcon.addEventListener("click", ()=>{this.toggleUI()});
        this.userCount.addEventListener("click", ()=>{this.toggleUI()});
    }

    defineListeners(){
        this.client.socket.on('userList', (data) => {
            this.updateList(data);
        });
    }

    updateList(list){
        //Clear list and set user count
        this.userCount.textContent = list.length == 1 ? '1 User' : `${list.length} Users`;
        this.userList.innerHTML = null;

        //create a new map
        var newMap = new Map();

        //for each user
        list.forEach((user) => {
            //randomly pick a color
            var color = this.userColors[Math.floor(Math.random()*this.userColors.length)]

            //if this user was in the previous colormap
            if(this.colorMap.get(user.user) != null){
                //Override with previous color
                color = this.colorMap.get(user.user);
            }

            newMap.set(user.user, color);
            this.renderUser(user, color);
        });

        this.colorMap = newMap;
    }

    renderUser(user, color){
        var userEntry = document.createElement('p');

        userEntry.innerText = user.user;
        userEntry.id = `user-entry-${user.user}`;

        //Override color with flair
        if(user.flair != ""){
            color = `flair-${user.flair}`;
        }

        userEntry.classList.add("chat-panel-users","user-entry",color);

        this.userList.appendChild(userEntry);
    }

    toggleUI(show = this.userDiv.style.display == "none"){
        if(show){
            this.userDiv.style.display = "flex";
            this.toggleIcon.classList.replace("bi-caret-left-fill","bi-caret-down-fill");
        }else{
            this.userDiv.style.display = "none";
            this.toggleIcon.classList.replace("bi-caret-down-fill","bi-caret-left-fill");
        }
    }

}