const media = document.querySelector('video');
const controls = document.querySelector('.controls')
const volumeSlider = document.querySelector('.volume');

const play = document.querySelector('.play');
const stop = document.querySelector('.stop');
const rwd = document.querySelector('.rwd');
const fwd = document.querySelector('.fwd');

const timerWrapper = document.querySelector('.timer');
const timer = document.querySelector('.timer span');
const timerBar = document.querySelector('.timer div');

media.removeAttribute("controls");
controls.style.visibility = "visible";

play.addEventListener('click', playPauseMedia);
stop.addEventListener('click', stopMedia);
media.addEventListener('ended', stopMedia);
media.addEventListener('timeupdate', setTime);
rwd.addEventListener("click", mediaBackward);
fwd.addEventListener("click", mediaForward);
timerWrapper.addEventListener('click', timerSeeking); 

volumeSlider.addEventListener('change', () => {
    media.volume = volumeSlider.value;
});

function timerSeeking (e) {
    const timerX = Math.floor(timerWrapper.getBoundingClientRect().x);
    const timerWidth = Math.floor(timerWrapper.getBoundingClientRect().width);
    
    const currentSeek = (e.x - timerX) / timerWidth;
        
    media.currentTime = Math.floor(media.duration * currentSeek);
    timerBar.style.width = `${Math.floor(timerWidth * currentSeek)}px`;
};


function playPauseMedia() {
    rwd.classList.remove('active');
    fwd.classList.remove('active');
    clearInterval(intervalRwd);
    clearInterval(intervalFwd);

    if (media.paused) {
        play.setAttribute('data-icon', 'u');
        media.play();
    } else {
        play.setAttribute('data-icon', 'P');
        media.pause();
    }
}

function stopMedia() {
    rwd.classList.remove('active');
    fwd.classList.remove('active');
    clearInterval(intervalRwd);
    clearInterval(intervalFwd);

    media.pause();
    media.currentTime = 0;
    play.setAttribute('data-icon', 'P');
}

let intervalFwd;
let intervalRwd;

function mediaBackward() {

    if (rwd.classList.contains('active')) {
        rwd.classList.remove('active');
        clearInterval(intervalRwd);
        media.play();
    } else {
        rwd.classList.add('active');
        media.pause();
        intervalRwd = setInterval(windBackward, 200);
    }
}

function mediaForward() {

    if (fwd.classList.contains('active')) {
        fwd.classList.remove('active');
        clearInterval(intervalFwd);
        media.play();
    } else {
        fwd.classList.add('active');
        media.pause();
        intervalFwd = setInterval(windForward, 200);
    }
}

function windBackward() {
    if (media.currentTime <= 3) {
        rwd.classList.remove('active');
        clearInterval(intervalRwd);
        stopMedia();
    } else {
        media.currentTime -= 3;
    }
}

function windForward() {
    if (media.currentTime >= media.duration - 3) {
        fwd.classList.remove('active');
        clearInterval(intervalFwd);
        stopMedia();
    } else {
        media.currentTime += 3;
    }
}

function setTime() {
    console.log(media.currentTime);

    const hours = Math.floor(media.currentTime / 3600);
    const minutes = Math.floor(media.currentTime / 60 - hours * 60);
    const seconds = Math.floor(media.currentTime - minutes * 60);

    const hourValue = hours.toString().padStart(2,'0');
    const minuteValue = minutes.toString().padStart(2, '0');
    const secondValue = seconds.toString().padStart(2, '0');

    let videoDur;

    const durHours = Math.floor(media.duration / 3600).toString().padStart(2, '0').toString().padStart(2, '0');
    const durMinutes = Math.floor(media.duration / 60 - durHours * 60).toString().padStart(2, '0').toString().padStart(2, '0');
    const durSeconds = Math.floor(media.duration - durMinutes * 60).toString().padStart(2, '0').toString().padStart(2, '0');

    if (media.duration > 3600) {
        durSecond = durSeconds - (durHours * 3600);
        videoDur = `${durHours}:${durMinutes}:${durSecond.toString().padStart(2, '0')}`;
    } else {
        videoDur = `${durMinutes}:${durSeconds}`;
    }

    console.log(hourValue, minuteValue, secondValue);

    if (hours > 0) {
        const second = secondValue - (hours * 3600);
        const mediaTime = `${hourValue}:${minuteValue}:${second.toString().padStart(2, '0')}`;
        timer.textContent = mediaTime +" / "+ videoDur;
    } else {
        const mediaTime = `${minuteValue}:${secondValue}`;
        timer.textContent = mediaTime +" / "+ videoDur;  
    };
    const barLength = 
    timerWrapper.clientWidth * (media.currentTime / media.duration);
    timerBar.style.width = `${barLength}px`;
}