let remote = "http://localhost:8080"

let coverCache = []

let mainAudio = new Audio();

//LZString.compress()

async function playSong(songData, imageData) {
    console.log(songData)
    playbackIcon.src = "/loading.svg" 
    progressActive.style.width = "0%"

    mainAudio.src = remote + "/api/stream/" + songData["id"]

    coverLabel.src = imageData
    titleLabel.innerText = songData["title"]
    artistLabel.innerText = songData["artist"]
    
    mainAudio.addEventListener("loadedmetadata", () => {
        playbackIcon.src = "/pauseIcon.svg"
    })

    mainAudio.addEventListener("timeupdate", () => {
        progressActive.style.width = mainAudio.currentTime / mainAudio.duration * 100 + "%"
    })

    mainAudio.play()
}

playButton.addEventListener("click", () => {
    console.log("burger")
    if (mainAudio.paused == false) {
        mainAudio.pause()
        playbackIcon.src = "/playIcon.svg" 
    } else {
        mainAudio.play()
        playbackIcon.src = "/pauseIcon.svg" 
    }
})

async function listSongs() {
    // connect to the burgertunes API
    let response = await fetch(remote + "/api/listmusic");
    let json = await response.json()

    // populate the ui with songs

    // remove existing
    document.querySelectorAll(".songDiv").forEach((x) => x.remove())

    for (x in json) {
        let songData = json[x]

        let songDiv = document.createElement("div")
        songDiv.id = "songDiv"
        songDiv.classList.add("songDiv")
        songList.append(songDiv)

        let titleLabel = document.createElement("p")
        titleLabel.classList.add("title")
        titleLabel.innerText = songData["title"]
        songDiv.append(titleLabel)

        let artistLabel = document.createElement("p")
        artistLabel.classList.add("artist")
        artistLabel.innerText = songData["artist"]
        songDiv.append(artistLabel)

        let coverLabel = document.createElement("img")
        coverLabel.classList.add("cover")
        coverLabel.loading = "lazy"
        coverLabel.src = ""

        let imageData = "/placeholder.svg"

        coverLabel.addEventListener("error", async function () {
            // check if cover is already cached in memory

            let coverCacheItem = coverCache.find(item => item.hash === songData["hash"]);

            if (coverCacheItem) {
                imageData = coverCacheItem["data"]
            } else {
                let imageResponse = await fetch(remote + "/api/cover/" + songData["id"]);
                imageData = await imageResponse.text()
                imageData = "data:image/avif;base64," + imageData

                if (imageResponse.status == 200) {
                    coverCache.push({ "hash": songData["hash"], "data": imageData })
                }

                if (imageResponse.status != 200) {
                    imageData = "/placeholder.svg"
                }
            }

            coverLabel.src = imageData
        })
        
        songDiv.addEventListener("click", () => {
            playSong(songData, imageData)
        });
        songDiv.append(coverLabel)

    }
    console.log(json)
}

listSongs()