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

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

  function getCurrentPageLang() {
      return document.documentElement.lang || "en";
  }
  function getLikeEndPoint() {
    let currentArticleName = window.location.pathname.split('/')[2];
    if (currentArticleName.indexOf('.') > 0) {
      currentArticleName = currentArticleName.slice(0, currentArticleName.lastIndexOf('.'))
    }

    return `${window.location.origin}/like/${currentArticleName}`;
  }

  const isAnArticle = articles.length === 1; // The front page have multiple articles.

  if (isAnArticle) {
    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');
      }
    });

    icon.addEventListener('click', () => {
      const c = icon.children[1];
      const lang = getCurrentPageLang();

      const path = c.querySelector('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',
          'lang': lang,
        },
      }).then(response => {
        const t = response.text();

        if (response.ok) {
          messagesLike.classList.remove('err');
          t.then(t => messagesLike.textContent = t);
          updateNbLikes();
        } else {
          t.then(t => {
            // In case of error, we want to be able to set the initial message back
            const previousText = messagesLike.textContent;
            const timeoutErr = 3000;
            const wasAnError = messagesLike.classList.contains('err');

            // Set the error
            messagesLike.classList.add('err');
            if (Math.floor(response.status / 100) == 4) {
              messagesLike.textContent = t;
            } else {
              messagesLike.textContent = lang == 'fr' ? 'Désolé, le service est indisponible.' : 'Sorry, service unavailable.';
            }

            // Set the initial message back
            if(!wasAnError) {
              setTimeout(() => {
                if(messagesLike.classList.contains('err')) {
                  messagesLike.classList.remove('err');
                  messagesLike.textContent = previousText;
                }
              }, timeoutErr);
            }
          });
        }
      }).catch(() => {
        // In case of exception error. We don't want to set back the initial message.
        messagesLike.classList.add('err');
        messagesLike.textContent = lang == 'fr' ? 'Désolé, le service est indisponible.' : 'Sorry, service unavailable.';
        messageText = '';
      });
    });
  }
});