import moment from 'moment';

const $t = (lang, key) => {
  const data = {
    'es': {
      'Date': 'Fecha',
      'Time': 'Tiempo',
    },
    'pt': {
      'Date': 'Data',
      'Time': 'Tempo',
    },
    'ru': {
      'Date': 'Дата',
      'Time': 'Время',
    },
    'th': {
      'Date': 'วันที่',
      'Time': 'เวลา',
    },
    'vi': {
      'Date': 'Ngày',
      'Time': 'Thời gian',
    },
  }

  return data[lang] && data[lang][key] ? data[lang][key] : key;
}

const initPopup = async (container) => {
  const lang = localStorage.getItem('form__lang');
  const popupDataResponse = await fetch(`https://quadcode.com/api/popup/webinar/${lang}`);
  //const popupDataResponse = await fetch(`https://quadcodewordpressapi.foach.site/wp-json/api/v2/popup/webinar?lang=${ lang }`);
  const responseData = popupDataResponse.ok ? await popupDataResponse.json() : undefined;

  if (!responseData) return false;

  const exitButton = document.querySelector('.popupWebinar__close');
  const title = document.querySelector('.popupWebinar__title');
  const subtitle = document.querySelector('.popupWebinar__description');
  const text = document.querySelector('.popupWebinar__text')
  const bullets = document.querySelector('.popupWebinar__bullets');
  const date = document.querySelector('.popupWebinar__date');
  const time = document.querySelector('.popupWebinar__time');
  const button = document.querySelector('.popupWebinar__button');

  const dateMoment = moment(responseData.date).local().locale(lang);

  const preparedDate = dateMoment.format(lang === 'en' ? 'dddd, MMMM Do YYYY' : 'dddd, DD.MM.YYYY');
  const preparedTime = dateMoment.format('LT');

  title.innerHTML = responseData.title ?? 'Title';
  subtitle.innerHTML = responseData.subtitle ?? 'Sub Title';
  text.innerHTML = responseData.text ?? 'Text';
  bullets.innerHTML = responseData.bullets.map((bullet) => {
    return `<li><li class="popupWebinar__bullet">✅ ${ bullet.text }</li></li>`;
  }).join('') ?? '';
  date.innerHTML = `📅 ${ $t(lang, 'Date') } ${ preparedDate }`;
  time.innerHTML = `📅 ${ $t(lang, 'Time') } ${ preparedTime }`;
  button.innerText = responseData.buttonText ?? 'Button';
  button.setAttribute('href', responseData.buttonLink ?? '#');

  container.style.display = 'block';
  localStorage.setItem('popupWebinar-viewed', true);

  exitButton.addEventListener('click', () => {
    container.style.display = 'none';
  });
}

window.addEventListener('load', async () => {
  const container = document.querySelector('.popupWebinar');
  const isViewed = localStorage.getItem('popupWebinar-viewed');

  if (!container || isViewed) return false;

  setTimeout(async () => {
    await initPopup(container);
  }, 15000)
});