let audio = document.createElement("audio");
let tick;

async function mpFetchAsync (url) {
    let response = await fetch(url);
    let data = await response.json();

    return data;
}

function mpFormatTime (number) {
    let min = Math.floor(number / 60);
    let sec = Math.floor(number - min * 60);

    if (min < 10) { min = "0" + min; }
    if (sec < 10) { sec = "0" + sec; }

    return min + ":" + sec;
}

function mpTick () {
    let seek = document.getElementById("mp_seek_slider");
    let current = document.getElementById("mp_current_time");
    let duration = document.getElementById("mp_total_duration");

    let seekPos = 0;

    if (!isNaN(audio.duration)) {
        seekPos = audio.currentTime * (100 / audio.duration);
        seek.value = seekPos;

        current.textContent = mpFormatTime(audio.currentTime);
        duration.textContent = mpFormatTime(audio.duration); // This shouldn't be necessary but initial update doesn't always work???
    }
}

async function mpUpdate () {
    clearInterval(tick);

    const trackSelector = document.getElementById("mp_tracks");
    const trackName = trackSelector.value;

    let duration = document.getElementById("mp_total_duration");
    duration.textContent = mpFormatTime(audio.duration);

    audio.src = "/audio/get?file=" + trackName;
    audio.currentTime = 0;

    tick = setInterval(mpTick, 1000);
}

function mpIsPlaying() {
    return !audio.paused;
}

function mpPpTrack() {
    mpIsPlaying() ? audio.pause() : audio.play();
}

const trackList = await mpFetchAsync("/audio");
let trackSelector = document.getElementById("mp_tracks");

trackList.forEach((track) => {
    let option = document.createElement("option");
    option.text = track;

    trackSelector.add(option, 0);
});

document.getElementById("mp_tracks").addEventListener("change", mpUpdate, false);
document.getElementById("mp_pp_track").addEventListener("click", mpPpTrack, false);