let scrollTimeout

const listenActive = () => {
  const elems = document.querySelector(".pagetoc").children
  ;[...elems].forEach((el) => {
    el.addEventListener("click", (event) => {
      clearTimeout(scrollTimeout)
      ;[...elems].forEach((el) => el.classList.remove("active"))
      el.classList.add("active")
      // Prevent scroll updates for a short period
      scrollTimeout = setTimeout(() => {
        scrollTimeout = null
      }, 100) // Adjust timing as needed
    })
  })
}

const getPagetoc = () =>
  document.querySelector(".pagetoc") || autoCreatePagetoc()

const autoCreatePagetoc = () => {
  const main = document.querySelector("#content > main")
  const content = Object.assign(document.createElement("div"), {
    className: "content-wrap",
  })
  content.append(...main.childNodes)
  main.prepend(content)
  main.insertAdjacentHTML(
    "afterbegin",
    '<div class="sidetoc"><nav class="pagetoc"></nav></div>'
  )
  return document.querySelector(".pagetoc")
}
const updateFunction = () => {
  if (scrollTimeout) return // Skip updates if within the cooldown period from a click
  const headers = [...document.getElementsByClassName("header")]
  const scrolledY = window.scrollY
  let lastHeader = null

  // Find the last header that is above the current scroll position
  for (let i = headers.length - 1; i >= 0; i--) {
    if (scrolledY >= headers[i].offsetTop) {
      lastHeader = headers[i]
      break
    }
  }

  const pagetocLinks = [...document.querySelector(".pagetoc").children]
  pagetocLinks.forEach((link) => link.classList.remove("active"))

  if (lastHeader) {
    const activeLink = pagetocLinks.find(
      (link) => lastHeader.href === link.href
    )
    if (activeLink) activeLink.classList.add("active")
  }
}

window.addEventListener("load", () => {
  const pagetoc = getPagetoc()
  const headers = [...document.getElementsByClassName("header")]
  headers.forEach((header) => {
    const link = Object.assign(document.createElement("a"), {
      textContent: header.text,
      href: header.href,
      className: `pagetoc-${header.parentElement.tagName}`,
    })
    if (header.parentElement.querySelectorAll("a").length === 2) {
      link.textContent = header.parentElement.querySelectorAll("a")[1].text
    }
    pagetoc.appendChild(link)
  })
  updateFunction()
  listenActive()
  window.addEventListener("scroll", updateFunction)
})