const loadPost = async (post, toplevel = false) => {
  post.setAttribute('data-status', 'loading');
  const urlComponents = post.getAttribute('data-uri').split(/at:\/\/(did:plc:[a-z0-9]+)\/app\.bsky\.feed\.post\/([a-z0-9]+)/);
  fetch('/api/post/'+urlComponents[1]+'/'+urlComponents[2])
    .then((data) => {
      data.text().then((content) => {
        post.innerHTML = content;
        Promise.all([
          fetch('/api/likes/'+urlComponents[1]+"/"+urlComponents[2]),
          fetch('/api/replies/'+urlComponents[1]+"/"+urlComponents[2]),
          fetch('/api/reposts/'+urlComponents[1]+"/"+urlComponents[2]),
          fetch('/api/quotes/'+urlComponents[1]+"/"+urlComponents[2])
        ]).then((values) => {
          values[0].json().then((likes) => {
            post.querySelector('.like-count').textContent = likes.total;
            if (toplevel) {
              document.getElementById('likes').querySelector('.inner').innerHTML = likes.rendered;
            }
          });
          values[1].json().then((replies) => {
            post.querySelector('.reply-count').textContent = replies.total;
            if (toplevel) {
              document.getElementById('replies').querySelector('.inner').innerHTML = replies.rendered;
              document.getElementById('replies').querySelectorAll('.inner .post').forEach((reply) => {
                loadPost(reply);
              });
            }
          });
          values[2].json().then((reposts) => {
            post.querySelector('.repost-count').textContent = reposts.total;
            if (toplevel) {
              document.getElementById('reposts').querySelector('.inner').innerHTML = reposts.rendered;
            }
          });
          values[3].json().then((quotes) => {
            post.querySelector('.quote-count').textContent = quotes.total;
            if (toplevel) {
              document.getElementById('quotes').querySelector('.inner').innerHTML = quotes.rendered;
            }
          });
          post.setAttribute('data-status', 'loaded');
        })
      });
    });
}

document.addEventListener('click', (e) => {
  if (e.target.closest('.post .postSharing a')) {
    e.preventDefault();
    const link = e.target.closest('.post .postSharing a');
    const url = link.getAttribute('data-share');
    navigator.clipboard.writeText(url);
    const tooltip = document.createElement('span');
    tooltip.classList.add("copy-tooltip");
    tooltip.textContent = "Copied!";
    tooltip.style.top = e.y+"px";
    tooltip.style.left = e.x+"px";
    document.body.append(tooltip);
    setTimeout(() => {
      tooltip.remove();
    }, 3000);
  }
});

window.addEventListener('load', (_e) => {
  Promise.all(Array.from(document.querySelectorAll('[data-status="unloaded"]')).map(async (post) => {
    return new Promise(() => loadPost(post, document.querySelector("main").classList.contains("post")));
  })).then((ret) => {
    document.getElementById('spinner-container').style.display = "none";
  });
});