const navBar = document.querySelector("nav")
const uiButtons = document.querySelector("footer>section.left")
const footer = document.querySelector("footer")
const leftSection = document.querySelector("section.left")
const audioPourcentageLabel = document.querySelector("label[for='audioVolume']")  
const audio = new Audio()

function startAudio() {
    audio.src = "./assets/audio/Golden Hill (Radio Edit).mp3"
    audio.loop = true
    audio.play()
    audio.onended = () => {
        if (!audio.paused) {
            audio.play()
        }
    }
    updateVolume(audio.volume)
}

function muteAudio() {
    audio.muted = true
}

function unmuteAudio() {
    audio.muted = false
}

function showNavBar() {
    footer.style.zIndex = "-1"
    leftSection.style.zIndex = "-1"
    navBar.removeAttribute("hidden")
    for (const button of uiButtons.children) {
        button.setAttribute("hidden", "")
    }
}

function hideNavBar() {
    footer.style.zIndex = "9"
    leftSection.style.zIndex = "9"
    navBar.setAttribute("hidden", "")
    for (const button of uiButtons.children) {
        button.removeAttribute("hidden")
    }
}

function toggleAudio(element) {
    if (element.getAttribute("state") == 0) {
        system.call("audio::mute")
        element.setAttribute("state", 1)
        element.children[0].classList.replace("fa-music", "fa-music-slash")
    } else {
        system.call("audio::unmute")
        element.setAttribute("state", 0)
        element.children[0].classList.replace("fa-music-slash", "fa-music")
    }
}

function toggleMusic(element) {
    if (element.getAttribute("state") == 0) {
        system.call("audio::mute")
        element.setAttribute("state", 1)
        element.children[0].classList.replace("fa-pause", "fa-play")
        element.children[1].innerText = "Reprendre"
    } else {
        system.call("audio::unmute")
        element.setAttribute("state", 0)
        element.children[0].classList.replace("fa-play", "fa-pause")
        element.children[1].innerText = "Pause"
    }
}

function updateVolume(value) {
    audio.volume = value / 100
    audioPourcentageLabel.innerText = `${value}%`
}

function logout() {
    localStorage.removeItem("user")
    document.location.href = './login.html'
}

window.onload = () => {
    system.call("server::ping")
    system.call("player::profile")
    startAudio()
}

system.result("server::ping", (data) => {
    playersStatus.innerText = `${data.players.online}/${data.players.max}`
})

system.result("player::profile", (data) => {
    if (!localStorage.getItem("user")) {
        localStorage.setItem("user", JSON.stringify(data))
    }
})