window.addEventListener('DOMContentLoaded', () => {
  // This script insert a love button at the end of an article page

  const articles = document.querySelectorAll('article');

  const config = {
    likesEndPointBase: 'localhost:3000',
  };

  function getLikeEndPoint() {
    let currentArticleName = window.location.pathname.split('/')[2];
    if (currentArticleName.indexOf('.') > 0) {
      currentArticleName = currentArticleName.slice(0, currentArticleName.lastIndexOf('.'))
    }
    return `${window.location.protocol}//${config.likesEndPointBase}/like/${currentArticleName}`;
  }

  // The front page have multiple articles
  if (articles.length === 1) {
    const article = articles[0];
    const likes = article.querySelector('.likes');
    const nbLikes = article.querySelector('.nbLikes');
    const footnotes = article.querySelector('.footnotes');

    likes.style="display: 'block';";
    const updateNbLikes = () => {
      fetch(getLikeEndPoint(), {
        method: 'GET',
        headers: {
          'i-love-what-you-do': '<3',
        },
      }).then((res) => {
        if (res.ok) {
          res.text().then((text) => nbLikes.textContent = text);
        } else {
          nbLikes.textContent = "";
        }
      });
    };

    updateNbLikes();

    if (footnotes) {
      // We want: article.insertBefore(likes, footnotes);
      footnotes.before(likes);
    }

    const icon = likes.querySelector('.icon');
    const messagesLike = likes.querySelector('.likesNotes');

    icon.addEventListener('mouseover', () => {
      for (const c of icon.children) {
        const path = c.querySelector('path');
        path?.classList.add('anim');
      }
    });

    icon.addEventListener('mouseout', () => {
      for (const c of icon.children) {
        const path = c.querySelector('path');
        path?.classList.remove('anim');
      }
    });

    let timeOut;
    let messageText;
    icon.addEventListener('click', () => {
      const c = icon.children[1];
      {
        const path = c.querySelector('path');
        console.log(path)
        path.classList.add('anim-click');
        path.getAnimations().forEach(anim => {
          anim.cancel();
          anim.play();
        });

        fetch(getLikeEndPoint(), {
          method: 'POST',
          headers: {
            'i-love-what-you-do': '<3',
          },
        }).then(response => {
          const currentText = messagesLike.textContent;
          const t = response.text().then(text => {
            messagesLike.textContent = text;
            return text;
          });

          if (response.ok) {
            messagesLike.classList.remove('err');
            t.then((t) => messageText = t);
            updateNbLikes();
          } else {
            if (!messageText) {
              messageText = currentText;
            }

            messagesLike.classList.add('err');
            setTimeout(() => {
              messagesLike.classList.remove('err');
              messagesLike.textContent = messageText;
            }, 3000);
          }
        }).catch(() => {
          messagesLike.classList.add('err');
          messagesLike.textContent = 'Désolé, le service est indisponible';
          messageText = '';
        });
      }
    });
  }
});