{% if mastodon_id %}
<section class="" 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="link-button" href="https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}/{{ mastodon_id }}">
			<button type="button">
				Reply on Mastodon to comment &#187;
			</button>
		</a>
	</div>
</section>

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

<script type="module">
import {dateSuffixAdder, monthMap, timeFormatter} from "../../js/modules/mastodonDateTools.js";

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.url.replace(/\/[0-9]+/, ""));
    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 %}