script.ts

const html = document.querySelector('html') as HTMLElement;
const botonEnfoque = document.querySelector('.app__card-button--enfoque') as HTMLButtonElement;
const botonCorto = document.querySelector('.app__card-button--corto') as HTMLButtonElement;
const botonLargo = document.querySelector('.app__card-button--largo') as HTMLButtonElement;
const banner = document.querySelector('.app__image') as HTMLImageElement;
const titulo = document.querySelector('.app__title') as HTMLHeadingElement;
const botones = [...Array.from(document.querySelectorAll('.app__card-button'))];
const botonIniciarPausar = document.querySelector('#start-pause') as HTMLButtonElement;
const inputMusicaEnfoque = document.querySelector('#alternar-musica') as HTMLInputElement;
const textoIniciarPausar = document.querySelector('#start-pause span') as HTMLSpanElement;
const iconoIniciarPausar = document.querySelector(".app__card-primary-butto-icon") as HTMLImageElement;
const tiempoEnPantalla = document.querySelector('#timer') as HTMLDivElement;

const musica = new Audio('./sonidos/luna-rise-part-one.mp3');
const audioPlay = new Audio('./sonidos/play.wav');
const audioPausa = new Audio('./sonidos/pause.mp3');
const audioTiempoFinalizado = new Audio('./sonidos/beep.mp3');


let tiempoTranscurridoEnSegundos = 5;
let idIntervalo: null | number = null;

musica.loop = true;

inputMusicaEnfoque.addEventListener('change', () => {
    if (musica.paused) {
        musica.play();
    } else {
        musica.pause();
    }
});

botonEnfoque.addEventListener('click', () => {
    tiempoTranscurridoEnSegundos = 1500;
    cambiarContexto('enfoque');
    botonEnfoque.classList.add('active');
});

botonCorto.addEventListener('click', () => {
    tiempoTranscurridoEnSegundos = 300;
    cambiarContexto('descanso-corto');
    botonCorto.classList.add('active');
});

botonLargo.addEventListener('click', () => {
    tiempoTranscurridoEnSegundos = 900;
    cambiarContexto('descanso-largo');
    botonLargo.classList.add('active');
});

function cambiarContexto(contexto: string) {
    mostrarTiempo();
    botones.forEach(function (botonContexto) {
        botonContexto.classList.remove('active');
    });
    html.setAttribute('data-contexto', contexto);
    banner.setAttribute('src', `/imagenes/${contexto}.png`);
    switch (contexto) {
        case "enfoque":
            titulo.innerHTML = `
            Optimiza tu productividad,<br>
                <strong class="app__title-strong">sumérgete en lo que importa.</strong>
            `;
            break;
        case "descanso-corto":
            titulo.innerHTML = `
            ¿Qué tal tomar un respiro? <strong class="app__title-strong">¡Haz una pausa corta!</strong>
            `;
            break;
        case "descanso-largo":
            titulo.innerHTML = `
            Hora de volver a la superficie.<strong class="app__title-strong"> Haz una pausa larga.</strong>
            `;
            break;
        default:
            break;
    }
}

const cuentaRegresiva = () => {
    if (tiempoTranscurridoEnSegundos <= 0) {
        audioTiempoFinalizado.play();
        alert('¡Tiempo finalizado!');
        const enfoqueActivo = html.getAttribute("data-contexto") == "enfoque"
        if (enfoqueActivo) {
            //Broadcast event 
            const evento = new CustomEvent("EnfoqueFinalizado")
            document.dispatchEvent(evento)
        }
        reiniciar();
        return;
    }
    tiempoTranscurridoEnSegundos -= 1;
    mostrarTiempo();
};

botonIniciarPausar.addEventListener('click', iniciarOpausar);

function iniciarOpausar() {
    if (idIntervalo) {
        audioPausa.play();
        reiniciar();
        return;
    }
    audioPlay.play();
    idIntervalo = setInterval(cuentaRegresiva, 1000);
    textoIniciarPausar.textContent = "Pausar";
    iconoIniciarPausar.setAttribute('src', `/imagenes/pause.png`);
}

function reiniciar() {
    // Si existe entonces hazlo
    //
    if (idIntervalo) {
        clearInterval(idIntervalo);
    }
    textoIniciarPausar.textContent = "Comenzar";
    iconoIniciarPausar.setAttribute('src', `/imagenes/play_arrow.png`);
    idIntervalo = null;
}

function mostrarTiempo() {
    const tiempo = new Date(tiempoTranscurridoEnSegundos * 1000);
    const tiempoFormateado = tiempo.toLocaleTimeString('es-ES', { minute: '2-digit', second: '2-digit' });
    tiempoEnPantalla.innerHTML = `${tiempoFormateado}`;
}

mostrarTiempo();