let hasLoadedComments = false;
const container = document.getElementById("comments-container");
container.addEventListener("toggle", (_) => {
  if (container.open && !hasLoadedComments) {
    hasLoadedComments = true;
    fetchComments();
  }
});

async function fetchComments() {
  if (typeof commentsPostID !== "undefined") {
    const res = await fetch(
      `https://social.shadowfacts.net/api/v1/statuses/${commentsPostID}/context`,
    );
    const json = await res.json();
    const comments = json.descendants.map(makeCommentHTML).join("");
    const list = document.getElementById("comments-list");
    list.innerHTML = comments;
    list.querySelectorAll(".comment-body a").forEach((a) => {
      a.target = "_blank";
      a.rel = "nofollow";
    });
  }
}

function makeCommentHTML(status) {
  const date = new Date(status.created_at);
  const month = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec",
  ][date.getMonth()];
  return `
  <div class="comment">
    <div class="comment-user">
      <img src="${status.account.avatar}" loading="lazy">
      <div class="comment-user-name">
        <h3>${status.account.display_name}</h3>
        <a href="${status.account.url}" target="_blank">@${status.account.acct}</a>
      </div>
      <a href="${status.url}" target="_blank">
        <time datetime="${status.created_at}">
          ${month} ${date.getDate()}, ${date.getFullYear()}
        </time>
      </a>
    </div>
    <div class="comment-body">
      ${status.content}
    </div>
  </div>
  `;
}