import StartGameHandler from "./StartGameHandler.js";

class LobbyHandler {
    /**@param {import("../../../../../backend/node_modules/socket.io-client".Socket} socket Autocompletions VSC*/
    constructor(socket) {
        this.socket = socket;

        this.errorMsg = document.getElementById("errorMsg");

        this.code = null;
        this.playerList = [];

        this.user = null;

        this.socket.emit("requestIdentification");
        this.socket.on("identification", (user) => { this.user = user });

        // Für das Erstellen
        this.socket.on("lobbyCreated", (code) => { this.joinedLobby(code) });

        // Für das Beitreten
        this.socket.on("lobbyJoinError", (msg) => { this.showJoinError(msg) });
        this.socket.on("lobbyJoined", (code) => { this.joinedLobby(code) });

        // Für das Aktualisieren
        this.socket.on("lobbyUserUpdate", (data) => { this.lobbyUserUpdate(data) });

        // Für alles Was mit dem Starten zu tuhen hat
        this.startGameHandler = new StartGameHandler(this.socket);
    }

    handleCreateClick() {
        this.socket.emit("createLobby");
    }

    handleJoinClick(code){
        this.socket.emit("joinLobby", code);
    }

    showJoinError(msg){
        this.errorMsg.innerText = msg;
        this.errorMsg.style.display = "block";
    }

    joinedLobby(code) {
        this.code = code;

        this.updateUI();

        console.log(`Lobby beigerteten mit Code: ${code}`);
    }

    updateUI() {
        const lobbyContainer = document.getElementById("mainDiv");

        let playerHTML = "";
        this.playerList.forEach((player, index) => {
            const amI = player.id === this.user.id ? ` <span class="message">Ich</span>` : "";
            playerHTML += `
                <div class="player" id="player${index + 1}">
                    <h1>Spieler ${index + 1}${amI}</h1>
                    <h1>${player.username}</h1>
                </div>
            `;
        });
            
        lobbyContainer.innerHTML = `
            <div class="screen">
                <nav>
                    <h1>Spiel-Code:</h1>
                    <h1 class="message" id="code">
                        ${this.code}
                    </h1>
                </nav>
                <div id="playerList">
                    ${playerHTML}
                </div>
            </div>
        `;

        const codeText = document.getElementById("code");
        codeText.addEventListener("click", (event) => {
            event.target.innerText = "Kopiert!"

            setTimeout(() => {
                codeText.innerText = this.code;
            }, 1500);

            navigator.clipboard.writeText(this.code);
        });

        this.errorMsg.style.display = "none";
    }


    lobbyUserUpdate(data) {
        this.playerList = data.users;

        this.updateUI();
    }
}

export default LobbyHandler;