let ws;
let isRecording = false;

function toggleRecording() {
    if (!isRecording) {
        ws = new WebSocket("ws://localhost:8000/ws");
        ws.onopen = () => ws.send("start");
        ws.onmessage = (event) => {
            const serverMessage = event.data;

            if (serverMessage.startsWith("chunk:")) {
                const chunkText = serverMessage.substring(6); // Remove "chunk:" prefix
                document.getElementById('audio-chunks').innerText = chunkText;          
            } else if (serverMessage === "Restarting system...") {
                isRecording = false;
                updateButton();
            } else {
                document.getElementById('results').innerText = serverMessage;
            }
        };
        isRecording = true;
    } else {
        ws.send("stop");
        isRecording = false;
    }
    updateButton();
}

function updateButton() {
    const startButton = document.getElementById('startBtn');
    if (isRecording) {
        startButton.innerText = "Stop";
        startButton.className = "stop-button";
    } else {
        startButton.innerText = "Start";
        startButton.className = "start-button";
    }
}

document.getElementById('startBtn').addEventListener('click', toggleRecording);

document.getElementById('toggleClassListBtn').addEventListener('click', function() {
    var classList = document.getElementById('class-list');
    if (classList.style.display === "none") {
        classList.style.display = "block";
    } else {
        classList.style.display = "none";
    }
});