const listDays = document.querySelectorAll('.ib-page.radio ul li');
const containerProgramacao = document.querySelector('.ib-programacaoRadio');
const d = new Date();
function scheduleOfTheDay() {
    containerProgramacao.innerHTML = '';
    const programacaoDoDia = listDays[d.getDay() - 1];
    const programacao = JSON.parse(programacaoDoDia.dataset.programacao);
    programacaoDoDia.classList.add('active');
    programacaoDoDia.dataset.programacaoDoDia = true;
    mountScheduleList(programacao, 'on');
}

function mountScheduleList(schedule, live) {
    const now = new Date();
    let horas = now.getHours().toString().padStart(2, '0');
    let minutos = now.getMinutes().toString().padStart(2, '0');
    let segundos = now.getSeconds().toString().padStart(2, '0');

    let horarioAtual = `${horas}:${minutos}:${segundos}`;
    const scheduleItems = schedule.map(({ programa, descrição, inicio, fim, imagem, locutor }) => {
        const isPlaying = horarioAtual >= inicio && horarioAtual < fim;
        const isLive = live === 'on' && isPlaying;
        return `
      <div class="programa fade-in ${isLive ? 'liveNow' : ''}">
        <figure>
          <img src="${imagem}" alt="${programa}" />
        </figure>
        <div>
          <h2>${programa}</h2>
          <h3>${(locutor.trim().length > 0 ? locutor : '--')}</h3>
          <p>${descrição}</p>
        </div>
        <button>
          <img class="plus" src="https://ibahia.com/themes/default/assets/img/radios/plus.svg" alt="${programa}" />
          <img class="minus" src="https://ibahia.com/themes/default/assets/img/radios/minus.svg" alt="${programa}" />
        </button>
        <p>${descrição}</p>
      </div>
    `;
    });

    containerProgramacao.innerHTML = scheduleItems.join('');

    const buttonsList = containerProgramacao.querySelectorAll('.programa');

    buttonsList.forEach((button) =>
        button.addEventListener('click', () => {
            if (button.classList.contains('active')) { return button.classList.remove('active') }
            buttonsList.forEach((button) => button.classList.remove('active'))
            button.classList.add('active')
        }))
}
document.addEventListener('DOMContentLoaded', () => {
    scheduleOfTheDay();
});

listDays.forEach((li) => {
    li.addEventListener('click', () => {
        listDays.forEach((item) => item.classList.remove('active'));
        li.classList.add('active');
        const programacao = JSON.parse(li.dataset.programacao);
        const isProgramacaoDoDia = li.dataset.programacaoDoDia === 'true';
        mountScheduleList(programacao, isProgramacaoDoDia ? 'on' : 'off');
    });
});