'use strict';

(() => {
  // === DOM & VARS =======

  const module = document.querySelector('.m-tours') || console.warn('element not found');

  const DOM = {
    module,
    images: Array.from(module.querySelectorAll('img[data-description]')),
    infoBox: document.getElementById('info'),
  };
  // const DefaultText = DOM.infoBox.querySelector('p').innerText;
  const defaultText = DOM.infoBox.innerHTML;

  // === INIT =============
  const init = () => {
    DOM.images.forEach((img) => {
      img.addEventListener('mouseenter', showImgData);
    });
    DOM.module.addEventListener('mouseleave', resetInfo);
  };

  // === EVENTHANDLER =====
  const showImgData = (e) => {
    const html = getInfoData(e.target);
    updateInfo(html);
  };

  const resetInfo = () => updateInfo(defaultText);

  // === XHR/FETCH ========

  // === FUNCTIONS ========
  const getInfoData = (img) => {
    const { countryCode, flagName, description } = img.dataset;

    // let html = `<p class="${img.dataset.flagName.toLowerCase()}"> <strong>${img.alt}</strong></p>`;
    let html = `<p><img src="assets/img/${countryCode}.svg" alt="${flagName}" /> <strong>${img.alt}</strong></p>`;
    html += `<p>${description}</p>`;

    return html;
  };

  const updateInfo = (html) => {
    DOM.infoBox.innerText = '';
    DOM.infoBox.insertAdjacentHTML('afterbegin', html);
  };

  init();
})();

// <section id="info">
//   <h3>
//     <img src="it.png" alt="Italian Flag" title="Italian Flag">
//     Colosseum
//   </h3>
//   <p>
//     The Colosseum or Coliseum, also known as the Flavian Amphitheatre or Colosseo, is an oval amphitheatre in...
//   </p>
// </section>