{% if mastodon_id %}
<section id="comment-section">
	<h2>Comments</h2>
	<div class="comment-ingress"></div>
	<div id="comments" data-id="{{ mastodon_id }}">
		<p>Loading comments...</p>
	</div>
	<div class="continue-discussion">
		<a class="big-link" href="https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}/{{ mastodon_id }}">Comment by replying to this post on Mastodon &#187;</a>
</section>

<template id="comment-template">
	<wc-comment
	author_name=""
	author_url=""
	avatar_url=""
	comment_content=""
	publish_date=""
	sharp_corner="">
	</wc-comment>
</template>

<script>
const monthMap = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

const dateSuffixAdder = (date) => {
	if (date > 9 && date < 20) {
		return "th";
	} else {
		let dateString = date < 10 ? "0" + date : "" + date;
		if (dateString[1] < 4 && dateString[1] > 0) {
			return dateString[1] == 1 ? "st" :
				dateString[1] == 2 ? "nd" :
					dateString[1] == 3 ? "rd" : null;
		} else {
			return "th"
		}
	}
}

const timeFormatter = (hours, minutes) => {
		return `${hours < 12 ? hours : hours - 12}:${minutes < 10 ? "0" : ""}${minutes} ${hours < 12 ? "AM" : "PM"}`
}

const renderComment = (comment, target, parentIdm) => {
  const node = document
    .querySelector("template#comment-template")
    .content.cloneNode(true);

  const dateObj = new Date(comment.created_at);

  const dateTime = `${dateObj.getDate()}${dateSuffixAdder(dateObj.getDate())} of ${monthMap[dateObj.getMonth()]}, ${dateObj.getFullYear()}, at ${timeFormatter(dateObj.getHours(), dateObj.getMinutes())}`;

    node.querySelector("wc-comment").setAttribute("author_name", comment.account.display_name);
    node.querySelector("wc-comment").setAttribute("author_url",
    `${comment.account.acct == "{{ metadata.mastodonUser }}" ? "https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}" : comment.account.acct}`);
    node.querySelector("wc-comment").setAttribute("avatar_url", comment.account.avatar_static);
    node.querySelector("wc-comment").setAttribute("comment_content", comment.content);
		node.querySelector("wc-comment").setAttribute("publish_date", dateTime);

  target.appendChild(node);
}

async function renderComments() {
  const commentsNode = document.querySelector("#comments");

  const mastodonPostId = commentsNode.dataset?.id;

  if (!mastodonPostId) {
    return;
  }

  commentsNode.innerHTML = "";

  const originalPost = await fetch(
    `https://{{ metadata.mastodonHost }}/api/v1/statuses/${mastodonPostId}`
  );
  const originalData = await originalPost.json();
  renderComment(originalData, commentsNode, null);

  const response = await fetch(
    `https://{{ metadata.mastodonHost }}/api/v1/statuses/${mastodonPostId}/context`
  );
  const data = await response.json();
  const comments = data.descendants;

  comments.forEach((comment) => {
    renderComment(comment, commentsNode, mastodonPostId);
  });
}

renderComments();
</script>
{% endif %}