/** @param {Event} evt */
function removeEffect({ target }) {
  const effectsLayer = document.querySelector("#effects")
  if (effectsLayer == null) {
    return
  }
  const effects = Array.from(effectsLayer.children).filter(
    (e) => e["__effectParent"] === target
  )
  effects.forEach((e) => {
    e.getAnimations().forEach((anim) => {
      if (+(anim.currentTime ?? 0) < 100) {
        anim.pause()
        effectsLayer.removeChild(e)
        return
      }
      anim.pause()
      anim.updatePlaybackRate(-0.25)
      anim.play()
      anim.addEventListener("finish", () => {
        if (effectsLayer.contains(e)) {
          effectsLayer.removeChild(e)
        }
      })
    })
  })
}

function isElement(target: EventTarget | null): target is Element {
  return target !== null && typeof target["matches"] === "function"
}

function addEffect({ target }: UIEvent) {
  const effectsLayer = document.querySelector("#effects")
  if (
    !isElement(target) ||
    !target.matches("a[href],.nav-toggle-button,button,input[type='radio']")
  ) {
    return
  }
  const color = window.getComputedStyle(target).getPropertyValue("--glowColor")
  const rects = Array.from(target.getClientRects())
  Array.from(target.children).forEach((child) => {
    rects.push(...Array.from(child.getClientRects()))
  })
  rects.forEach((rect) => {
    const { top, left, width, height } = rect
    const newEffect = document.createElement("div")
    newEffect["__effectParent"] = target
    newEffect.classList.add("effect-instance")
    const padding = "10rem"
    newEffect.style.top = `calc(${top + window.scrollY}px - ${padding})`
    newEffect.style.left = `calc(${left + window.scrollX}px - ${padding})`
    newEffect.style.width = `calc(${width}px + 2 * ${padding})`
    newEffect.style.height = `calc(${height}px + 2 * ${padding})`
    newEffect.style.setProperty("--glowColor", color)
    effectsLayer?.appendChild(newEffect)
  })
}

document.addEventListener("mouseenter", addEffect, true)
document.addEventListener("focus", addEffect, true)

document.addEventListener("mouseleave", removeEffect, true)
document.addEventListener("blur", removeEffect, true)