// Node.js file
function init() {
    let connectionButton = document.getElementById("connection"),
        disconnectionButton = document.getElementById("disconnection"),
        websocketStateButton = document.getElementById("websocketState"),
        button = document.getElementById("send"),
        connectState = document.getElementById("connectState"),
        speedButton = document.getElementById("speedButton"),
        answerColumn = document.getElementById("answerColumn"),
        socket,
        button_clicker = [];

    button.addEventListener("click", decideNameAndTeam, false);
    let clientInfo = {
        // id: null,
        name: null,
        team: null
    }

    function decideNameAndTeam() {
        let name = document.getElementById("name").value;
        clientInfo.name = name;
        let team = document.getElementById("team").value;
        clientInfo.team = team;
        // button.disabled = true;
        // teamとnameを変えたいときは,socket.send(clientInfo)で送る、Ruby側で、if idがあれば、名前とチームを変える処理をする
    }

    function websocket() {
        console.log(clientInfo);
        console.log(JSON.stringify(clientInfo));

        try {
            if (!socket || socket.readyState !== 1) { //!socketは最初の接続のときに真になる、socket.readyStateは接続後に真になる

                socket = new WebSocket('wss://www.koeki-prj.org/quiz2024');
                // socket = new WebSocket('ws://localhost:8293');
                socket.onopen = function (event) {
                    console.log("JS:接続されました！");
                    socket.send(`JS: ${clientInfo["team"]} の ${clientInfo["name"]} です！`)
                };

                socket.onmessage = function (event) {
                    let receivedMsg = event.data;
                    try {
                        button_clicker = JSON.parse(receivedMsg);
                        // console.log(button_clicker);
                        answerColumn.innerHTML = "" //表示場所のリセット
                        for (let i = 0; i < button_clicker.length; i++) {
                            // console.log(button_clicker[i][1]);
                            answerColumn.innerHTML += `${i + 1}: ${button_clicker[i][0]} の ${button_clicker[i][1]} です！<br>`
                        }
                    } catch (error) {
                        console.log(receivedMsg);
                        if (receivedMsg == "reset") {
                            answerColumn.innerHTML = "";
                        }
                    }
                }

                socket.onclose = function (event) {
                    if (event.wasClean) {
                        console.log("JS:切断しました！")
                    } else {
                        console.error("JS:切断エラーが起きました！");
                    }
                }

                socket.onerror = function (error) {
                    console.error("JS:WebSocket Error" + error)
                }
            }
        } catch (error) {
            console.error("エラーが発生しました！" + error);
        }
    }

    function socketClose() {
        if (socket.readyState == 1) {
            console.log(socket); //このときsocket.readyStateが1になっている
            socket.close();
            console.log(socket); //このときsocket.readyStateが2になる
        }
    }

    function socketState() {
        // console.log(socket.readyState); //websocket切断後にこの関数を実行するとsocket.readyStateが3になる
        switch (socket.readyState) {
            case 0:
                connectState.innerHTML = "CONNECTING";
                break;
            case 1:
                connectState.innerHTML = "OPEN";
                break;
            case 2:
                connectState.innerHTML = "CLOSING";
                break;
            case 3:
                connectState.innerHTML = "CLOSED";
                break;
        }
    }

    function sendAnswer() {
        socket.send(`JS: ${clientInfo["team"]} の ${clientInfo["name"]} がボタンを押しました！`)
        socket.send(JSON.stringify(clientInfo))
    }

    connectionButton.addEventListener("click", websocket, false);
    disconnectionButton.addEventListener("click", socketClose, false);
    websocketStateButton.addEventListener("click", socketState, false);
    speedButton.addEventListener("click", sendAnswer, false);
}

init()