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 () {
    if (audio.currentTime >= audio.duration) {
        mpNext();
    }

    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???
    }
}

function mpSeek () {
    const seek = document.getElementById("mp_seek_slider");
    const goal = audio.duration * (seek.value / 100);

    audio.currentTime = goal;
}

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;

    let ppButton = document.getElementById("mp_pp_track");
    ppButton.innerHTML = "<img src='/static/get?file=images/play.svg' alt='Play'>";

    tick = setInterval(mpTick, 1000);
}

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

function mpPpTrack () {
    let ppButton = document.getElementById("mp_pp_track");

    if (mpIsPlaying()) {
        audio.pause();
        ppButton.innerHTML = "<img src='/static/get?file=images/play.svg' alt='Play'>";
    } else {
        audio.play();
        ppButton.innerHTML = "<img src='/static/get?file=images/pause.svg' alt='Play'>";
    }
}

function mpNext () {
    let trackSelector = document.getElementById("mp_tracks");
    const index = trackSelector.selectedIndex + 1;
    if (index >= trackSelector.options.length) {
        trackSelector.selectedIndex = 0;
    } else {
        trackSelector.selectedIndex = index;
    }

    mpUpdate();
    mpPpTrack();
}

function mpPrevious () {
    let trackSelector = document.getElementById("mp_tracks");
    const index = trackSelector.selectedIndex - 1;
    if (index < 0) {
        trackSelector.selectedIndex = trackSelector.options.length - 1;
    } else {
        trackSelector.selectedIndex = index;
    }

    mpUpdate();
    mpPpTrack();
}

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_seek_slider").addEventListener("change", mpSeek, false);
document.getElementById("mp_pp_track").addEventListener("click", mpPpTrack, false);
document.getElementById("mp_prev_track").addEventListener("click", mpPrevious, false);
document.getElementById("mp_next_track").addEventListener("click", mpNext, false);

mpUpdate();