const audio = document.getElementById('audioPlayer');

const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');

const currentTimeSpan = document.getElementById('currentTime');
const totalTimeSpan = document.getElementById('totalTime');

const fileInput = document.getElementById('fileInput');
const loadFileBtn = document.getElementById('loadFileBtn');

const volume = document.getElementById('volume-slider');

const mediaInfo = document.querySelector('.media-info');

let timer = null;

let fileName;
let audioSrc;

/* Functions */

function toReadableTime(seconds) {
    return new Date(seconds * 1000).toISOString().substring(14, 19);
}

function updateTime() {
    currentTimeSpan.textContent = toReadableTime(audio.currentTime);
}

fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (file) {
        audioSrc = URL.createObjectURL(file);
        fileName = file.name.split('.mp3')[0];
    }
});

/* Events */

loadFileBtn.addEventListener('click', () => {
    audio.src = audioSrc;
    audio.load();
    mediaInfo.innerText = fileName;
    updateTime();
});

audio.addEventListener('loadedmetadata', () => {
    totalTimeSpan.textContent = toReadableTime(audio.duration);
});

playBtn.addEventListener('click', () => {
    audio.play();
    if (!timer) {
        timer = setInterval(updateTime, 500);
    }
    document.title = `Playing ${fileName}`;
});

pauseBtn.addEventListener('click', () => {
    audio.pause();
});

resetBtn.addEventListener('click', () => {
    audio.pause();
    audio.currentTime = 0;
    updateTime();
});

audio.addEventListener('ended', () => {
    clearInterval(timer);
    timer = null;
});

audio.addEventListener('pause', () => {
    clearInterval(timer);
    timer = null;
});

volume.addEventListener("input", function (e) {
    audio.volume = e.currentTarget.value / 100;
});

volume.addEventListener("dblclick", function (e) {
    audio.volume = 0.5;
    e.currentTarget.value = 50;
});