const ANNONCE_CONTENT = document.querySelector("div#annonce-content");
const BTN_ANNONCE_REFRESH = document.querySelector("button#annonce-refresh");
const IS_CONNECTED = document.documentElement.dataset.isConnected;
let annonceTimeoutID;

async function displayNews() {
  try {
    const response = await fetch("/api/news");
    const data = await response.json();

    if (!response.ok) {
      throw new Error(data.error);
    }

    const templateAnnonceList = document.querySelector("template#annonce-list").content.cloneNode(true);
    const ul = templateAnnonceList.querySelector("ul");

    for (const news of data) {
      const templateAnnonceListItem = document.querySelector("template#annonce-list-item").content.cloneNode(true);
      const li = templateAnnonceListItem.querySelector("li");
      const title = templateAnnonceListItem.querySelector("span.annonce-title");
      const date = templateAnnonceListItem.querySelector("time.annonce-date");
      const auteur = templateAnnonceListItem.querySelector("div.annonce-auteur");
      const auteurAvatar = auteur.querySelector("img");
      const auteurPseudo = auteur.querySelector("a");
      const message = templateAnnonceListItem.querySelector("div.annonce-message");
      const formatter = new Intl.DateTimeFormat("fr-FR", {
        dateStyle: "short",
        timeStyle: "short",
        timeZone: "Europe/Paris"
      });
      const sep = document.querySelector("template#annonce-list-separator").content.cloneNode(true);
      const safeMessage = document.createDocumentFragment();

      title.textContent = news.titre;
      date.textContent = formatter.format(new Date(news.date_envoi.replace(" ", "T") + "Z"));
      date.setAttribute("datetime", news.date_envoi);
      auteurAvatar.src = news.avatar;
      auteurPseudo.textContent = news.pseudo;
      auteurPseudo.href = "/profil?pseudo=" + news.pseudo;

      news.message.split(/\r?\n|\r/).forEach((line, index) => {
        if (index > 0) safeMessage.append(document.createElement("br"));
        safeMessage.append(document.createTextNode(line));
      });
      message.append(safeMessage);

      li.append(sep);
      ul.append(templateAnnonceListItem);
    }

    ANNONCE_CONTENT.replaceChildren();
    ANNONCE_CONTENT.append(templateAnnonceList);
  } catch (e) {
    console.error("displayNews: " + e);
    throw e;
  }

  BTN_ANNONCE_REFRESH?.querySelector("img")?.classList.remove("animate-spin");
}

function handlerDisplayNews() {
  BTN_ANNONCE_REFRESH?.querySelector("img")?.classList.add("animate-spin");

  if (annonceTimeoutID) clearTimeout(annonceTimeoutID);
  annonceTimeoutID = setTimeout(displayNews, 1500);
}

BTN_ANNONCE_REFRESH?.addEventListener("click", handlerDisplayNews);

if (IS_CONNECTED) {
  displayNews();
  setInterval(displayNews, 5000);
}