const expandedClass = "e-content--expanded";

export function toggleContentExpanded(id) {
  const content = document.querySelector(`.e-content[data-content-id="${id}"]`);
  const buttonBefore = document.querySelector(
    `button:has(+ .e-content[data-content-id="${id}"])`,
  );
  const buttonAfter = document.querySelector(
    `.e-content[data-content-id="${id}"] + button`,
  );

  if (!content) {
    throw new Error(`No content found with ID: ${id}`);
  }
  const classes = content.getAttribute("class").split(" ");
  const wasExpanded = classes.includes(expandedClass);
  if (wasExpanded) {
    const newClasses = classes.filter((c) => c != expandedClass);
    content.setAttribute("class", newClasses.join(" "));
  } else {
    content.setAttribute("class", [...classes, expandedClass].join(" "));
  }

  if (wasExpanded) {
    if (!buttonBefore) {
      console.warn("Tried to remove 'Read less' button but could not find it");
    } else {
      buttonBefore.remove();
    }
    if (!buttonAfter) {
      console.warn(
        "Tried to toggle 'Read less' button to say 'Read more' but could not find it",
      );
    } else {
      buttonAfter.textContent = "Read more";
    }
  } else {
    if (!buttonAfter) {
      console.warn(
        "Tried to toggle 'Read more' button to say 'Read less' but could not find it",
      );
    } else {
      buttonAfter.textContent = "Read less";
    }
    if (buttonBefore) {
      buttonBefore.remove();
    }
    const newButtonBefore = createExpandCondenseButton(id, "Read less");
    content.insertAdjacentElement("beforebegin", newButtonBefore);
  }
}

export function addExpandItemButtons() {
  for (const content of document.querySelectorAll(".e-content")) {
    const contentId = crypto.randomUUID();
    content.setAttribute("data-content-id", contentId);
    const button = createExpandCondenseButton(contentId, "Read more");
    content.insertAdjacentElement("afterend", button);
  }
}

function createExpandCondenseButton(contentId, initialText) {
  const button = document.createElement("button");
  button.textContent = initialText;
  button.addEventListener("click", () => toggleContentExpanded(contentId));
  return button;
}