let wss = "ws://" + window.location.hostname + ":3001"  // Build socketio endpoint from window.location
const socket = io(wss);                                 // Connect to socketio server

// ######################################################################################################################################################
// Websockets event handler
// ######################################################################################################################################################

socket.on('connected', (message) => {
    console.log("Connected");
});

socket.on('timerDurationLeft', (message) => {
    console.log(message)                                            // Log durationLeft in client console
    document.getElementById("durationLeft").innerHTML = message;    // Display durationLeft in corresponding html Element
});

socket.on('timerEnded', (message) => {
    document.getElementById("durationLeft").innerHTML = "ENDE";     // Display "STOP" in same html element as the duration
});

socket.on('refresh', (message) => {
    document.location.reload()                                      // Reload page on received 'refresh' messagen
});

socket.on('score', (message) => {
    console.log(message)                                            // Log score in client console
    document.getElementById("score").innerHTML = message;           // Display score in corresponding html Element
});

socket.on('scoreSideswitch', (message) => {
    scoreGetValues();                                               // Update frontend when sides have been switch (switches team name sides)
});

// ######################################################################################################################################################
// General functions
// ######################################################################################################################################################

// Update DOM timer elements from passed values
function updateTimerFrontend(values) {
    document.getElementById("durationLeft").innerHTML = values.print;   // Display durationLeft as prettyfied string
}

// Update DOM score elements from passed values
function updateScoreFrontend(values) {
    document.getElementById("score").innerHTML = values.print;          // Set score on admin interface

    if(!values.sideswitch) {
        if(values.teamA.isSpielgemeinschaft) {
            document.getElementById("teamA").innerHTML = values.teamA.name + '<br>' + values.teamA.name2;
        } else {
            document.getElementById("teamA").innerHTML = values.teamA.name
        }
    
        if(values.teamB.isSpielgemeinschaft) {
            document.getElementById("teamB").innerHTML = values.teamB.name + '<br>' + values.teamB.name2;
        } else {
            document.getElementById("teamB").innerHTML = values.teamB.name
        }
    } else {
        if(values.teamA.isSpielgemeinschaft) {
            document.getElementById("teamB").innerHTML = values.teamA.name + '<br>' + values.teamA.name2;
        } else {
            document.getElementById("teamB").innerHTML = values.teamA.name
        }
    
        if(values.teamB.isSpielgemeinschaft) {
            document.getElementById("teamA").innerHTML = values.teamB.name + '<br>' + values.teamB.name2;
        } else {
            document.getElementById("teamA").innerHTML = values.teamB.name
        }        
    }

}

async function initialUpdate() {
    timerGetValues();                                           // Request new values for timer
    scoreGetValues();                                           // Request new values for score
}

// ######################################################################################################################################################
// Timerfunctions
// ######################################################################################################################################################

// Request important timer values
async function timerGetValues() {
    const response = await fetch("/admin/timerGetValues");      // Call API Endpoint /admin/timerGetValues
    const data = await response.json();                         // Wait for asynchronous transfer to complete
    updateTimerFrontend(data);                                  // Update admin frontend
}

// ######################################################################################################################################################
// Scoreboardfunctions
// ######################################################################################################################################################

// Request important values for score
async function scoreGetValues() {
    const response = await fetch("/admin/scoreGetValues");      // Call API Endpoint /admin/scoreGetValues
    const data = await response.json();                         // Wait for asynchronous transfer to complete and parse json (which got received by backend)
    console.log(data);                                          // Print received data
    updateScoreFrontend(data);                                  // Update admin frontend with received values for scoreboard
}