const btn = document.getElementById("button");

btn.addEventListener("click",function(){
 list.classList.toggle("kotae")
});

function Audio1() {
      document.getElementById('btn_audio1').currentTime = 0; //連続クリックに対応
      document.getElementById('btn_audio1').play(); //クリックしたら音を再生
  }
function Audio2() {
      document.getElementById('btn_audio2').currentTime = 0; //連続クリックに対応
      document.getElementById('btn_audio2').play(); //クリックしたら音を再生
  }
  
  function init() {
    let songName = document.getElementById("songName"),
        audio = document.getElementById("audio"),
        previousSong = document.getElementById("previousSong"),
        nextSong = document.getElementById("nextSong"),
        speedButtonReset = document.getElementById("speedButtonReset"),
        answerColumn = document.getElementById("answerColumn"),
        counter = 1;// 1行目から始まる

    console.log(audio);
    console.log(previousSong);
    console.log(nextSong);

    fetch("js/mp3/mp3_path.csv") // htmlから見てのコード
        .then(response => response.text())
        .then(data => {
            const result = data.split(/\r?\n|\r/).map(line => line.split(","));
            console.log(result);

            if (result.length > 1) {
                songName.innerHTML = result[0][0]; //csvコードの[0]行目の[0]列目
                audio.src = result[0][2]; // csvコードの[0]行目の[2]列目
                console.log(audio.src)
            }

            nextSong.addEventListener("click", handleNextSong, false);
            previousSong.addEventListener("click", handlePreviousSong, false);

            function handlePreviousSong() {
                counter -= 1;
                if (counter < 1) {
                    counter = result.length;
                }
                updateSong(counter);
                console.log(counter)
            }
            
            function handleNextSong() {
                counter += 1;
                console.log(result.length)
                if (counter > result.length) {
                    counter = 1;
                }
                updateSong(counter);
            }

            function updateSong(index) {
                if (result[index -1]) { // 1行目からではなく -1 で0行目からにしている
                    songName.innerHTML = result[index -1][0]; // result[index -1]で0行目に直している
                    audio.src = result[index -1][2]; // result[index -1][2]で0行目の2列目を指定している
                }
                socket.send("reset");
                answerColumn.innerHTML = "";
            }

        })
        .catch(error => {
            console.error("CSVファイルの読み込みに失敗しました:", error);
        });

    let socket;
    function setupWebSocket() {
        try {
            if (!socket || socket.readyState !== WebSocket.OPEN) {

                socket = new WebSocket('wss://www.koeki-prj.org/quiz2024');
                socket.onopen = function () {
                    console.log("JS: 接続されました！");
                    socket.send("JS: Hostです！");
                };

                socket.onmessage = function (event) {
                    let receivedMsg = event.data;
                    try {
                        const buttonClicker = JSON.parse(receivedMsg);
                        console.log(buttonClicker);
                        answerColumn.innerHTML = ""; // 表示場所のリセット
                        buttonClicker.forEach((item, index) => {
                            console.log(item[1]);
                            answerColumn.innerHTML += `${index + 1}: ${item[1]}班 の ${item[0]}さん です！<br>`;
                        });
                    } catch (error) {
                        console.log(receivedMsg);
                        if (receivedMsg.includes("pushed button")) {
                            console.log(receivedMsg);
                            audio.pause();
                        }
                    }
                };

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

                socket.onerror = function (error) {
                    console.error("JS: WebSocket エラー", error);
                };

                speedButtonReset.addEventListener("click", resetWebSocket, false);

                function resetWebSocket() {
                    socket.send("reset");
                    answerColumn.innerHTML = "";
                }
            }
        } catch (error) {
            console.error("WebSocketのセットアップ中にエラーが発生しました！", error);
        }
    }

    document.addEventListener("DOMContentLoaded", setupWebSocket, false);
}

init();
