06 Haga lo que hicimos en aula: comenzando y pausando el temporizador

const html = document.querySelector('html');
const banner = document.querySelector('.app__image');
const tittle = document.querySelector('.app__title');
const music = new Audio('./sonidos/luna-rise-part-one.mp3');
const inputMusic = document.getElementById("alternar-musica");
const buttons = document.querySelectorAll('.app__card-button');
const buttonStartPause = document.getElementById("start-pause");
const buttonShort = document.querySelector('.app__card-button--corto');
const buttonLarge = document.querySelector('.app__card-button--largo');
const buttonFocus = document.querySelector('.app__card-button--enfoque');

let idIntervalo = null;
let elapsedtimeinseconds = 5;

music.loop = true;
inputMusic.addEventListener('change', () => {
    if (music.paused) {
        music.play();
    } else {
        music.pause();
    }
});

buttonShort.addEventListener('click', () => {
    changeContext('descanso-corto');
    buttonShort.classList.add('active');
})

buttonFocus.addEventListener('click', () => {
    changeContext('enfoque');
    buttonFocus.classList.add('active');
})

buttonLarge.addEventListener('click', () =>{
    changeContext('descanso-largo');
    buttonLarge.classList.add('active');
})

function changeContext(contexto) {

    buttons.forEach(function(contexto) {
        contexto.classList.remove('active');
    });

    html.setAttribute('data-contexto', contexto);
    banner.setAttribute('src', `./imagenes/${contexto}.png`);

    switch (contexto) {
        case "enfoque":
            tittle.innerHTML = `
            Optimiza tu productividad,<br>
                <strong class="app__title-strong">sumérgete en lo que importa.</strong>`
            break;

            case"descanso-corto":
            tittle.innerHTML = `
            ¿Qué tal tomar un respiro? 
                <strong class="app__title-strong">¡Haz una pausa corta!</strong>`
            break;

            case"descanso-largo":
            tittle.innerHTML = `
            Hora de volver a la superficie
            <strong class="app__title-strong">¡Haz una pausa larga!</strong>`
            break;
        default:
            break;
    }
}

const countdown = () =>{
    if (elapsedtimeinseconds <= 0){
        return;
    } 
    elapsedtimeinseconds -= 1;
}

buttonStartPause.addEventListener('click', startPause);

function startPause() {
    if (idIntervalo) {
        restart();
        return;
    }
    idIntervalo = setInterval(countdown, 1000);
};

function restart(){
    clearInterval();
    idIntervalo = null;
}