bloom.mjs

import { apiService } from "../index.mjs";

/**
 * Create a bloom component
 * @param {string} template - The ID of the template to clone
 * @param {Object} bloom - The bloom data
 * @returns {DocumentFragment} - The bloom fragment of UI, for items in the Timeline
 * btw a bloom object is composed thus
 * {"id": Number,
 * "sender": username,
 * "content": "string from textarea",
 * "sent_timestamp": "datetime as ISO 8601 formatted string"},
 * "reblooms": "reblooms count",
 * "original_bloom_id": "id of the rebloomed post"

 */
const createBloom = (template, bloom) => {
  if (!bloom) return;
  const bloomFrag = document.getElementById(template).content.cloneNode(true);
  const bloomParser = new DOMParser();

  const bloomArticle = bloomFrag.querySelector("[data-bloom]");
  const bloomUsername = bloomFrag.querySelector("[data-username]");
  const bloomTime = bloomFrag.querySelector("[data-time]");
  const bloomTimeLink = bloomFrag.querySelector("a:has(> [data-time])");
  const bloomContent = bloomFrag.querySelector("[data-content]");
  const rebloomButtonEl = bloomFrag.querySelector(
    "[data-action='share-bloom']"
  );
  const rebloomCountEl = bloomFrag.querySelector("[data-rebloom-count]");
  const rebloomInfoEl = bloomFrag.querySelector("[data-rebloom-info]");

  bloomUsername.setAttribute("href", `/profile/${bloom.sender}`);
  bloomUsername.textContent = bloom.sender;
  bloomTime.textContent = _formatTimestamp(bloom.sent_timestamp);
  bloomTimeLink.setAttribute("href", `/bloom/${bloom.id}`);
  bloomContent.replaceChildren(
    ...bloomParser.parseFromString(_formatHashtags(bloom.content), "text/html")
      .body.childNodes
  );

  rebloomCountEl.textContent = `Rebloomed ${bloom.reblooms} times`;
  rebloomCountEl.hidden = bloom.reblooms == 0;
  rebloomButtonEl.setAttribute("data-id", bloom.id || "");
  rebloomButtonEl.addEventListener("click", handleRebloom);
  rebloomInfoEl.hidden = bloom.original_bloom_id === null;

  if (bloom.original_bloom_id !== null) {
    apiService

      .fetchBloomData(bloom.original_bloom_id)
      .then((originalBloom) => {
        const timeStamp = _formatTimestamp(originalBloom.sent_timestamp);

        rebloomInfoEl.innerHTML = `↪ Rebloom of the ${originalBloom.sender}'s post, posted ${timeStamp} ago`;
      });
  }

  return bloomFrag;
};

function _formatHashtags(text) {
  if (!text) return text;
  return text.replace(
    /\B#[^#]+/g,
    (match) => `<a href="/hashtag/${match.slice(1)}">${match}</a>`
  );
}

function _formatTimestamp(timestamp) {
  if (!timestamp) return "";

  try {
    const date = new Date(timestamp);
    const now = new Date();
    const diffSeconds = Math.floor((now - date) / 1000);

    // Less than a minute
    if (diffSeconds < 60) {
      return `${diffSeconds}s`;
    }

    const diffMinutes = Math.floor(diffSeconds / 60);
    if (diffMinutes < 60) {
      return `${diffMinutes}m`;
    }


    const diffHours = Math.floor(diffMinutes / 60);
    if (diffHours < 24) {
      return `${diffHours}h`;
    }

    const diffDays = Math.floor(diffHours / 24);
    if (diffDays < 7) {
      return `${diffDays}d`;
    }

    return new Intl.DateTimeFormat("en-US", {
      month: "short",
      day: "numeric",
    }).format(date);
  } catch (error) {
    console.error("Failed to format timestamp:", error);
    return "";
  }
}

async function handleRebloom(event) {
  const button = event.target;
  const id = button.getAttribute("data-id");
  if (!id) return;

  await apiService.postRebloom(id);
}

export { createBloom, handleRebloom };