Back to top

"use client";

import { useEffect, useRef, useState, type ComponentProps, type MouseEvent } from "react";
import { Icon } from "./icon";
import "./back-to-top.css";

export type BackToTopProps = ComponentProps<"button"> & {
  /** How far, in pixels, the page or its scroll box must be scrolled before the button shows. */
  threshold?: number;
  /** The id of the element that takes focus at the top, such as the main heading. */
  target?: string;
  /** Shows the arrow alone; the label becomes the accessible name. */
  compact?: boolean;
  /** Pins it to the corner of the viewport instead of the end of its scroll box. */
  fixed?: boolean;
};

const FOCUSABLE =
  'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), summary';

/** The nearest ancestor that scrolls vertically, or null for the page itself. */
function scrollParent(element: HTMLElement): HTMLElement | null {
  for (let node = element.parentElement; node && node !== document.body; node = node.parentElement) {
    const overflow = getComputedStyle(node).overflowY;
    if (overflow === "auto" || overflow === "scroll" || overflow === "overlay") return node;
  }
  return null;
}

/** Smooth unless the motion tokens are at zero, which is where reduced motion puts them. */
function scrollBehavior(element: Element): ScrollBehavior {
  const value = getComputedStyle(element).getPropertyValue("--eq-dur-move").trim();
  return parseFloat(value) === 0 ? "auto" : "smooth";
}

export function BackToTop({
  threshold = 400,
  target,
  compact = false,
  fixed = false,
  className,
  children = "Back to top",
  onClick,
  ...rest
}: BackToTopProps) {
  const ref = useRef<HTMLButtonElement>(null);
  const [shown, setShown] = useState(false);

  useEffect(() => {
    const button = ref.current;
    if (!button) return;
    const box = fixed ? null : scrollParent(button);
    const source: HTMLElement | Window = box ?? window;
    const read = () => setShown((box ? box.scrollTop : window.scrollY) > threshold);
    read();
    source.addEventListener("scroll", read, { passive: true });
    return () => source.removeEventListener("scroll", read);
  }, [threshold, fixed]);

  function handleClick(event: MouseEvent<HTMLButtonElement>) {
    onClick?.(event);
    if (event.defaultPrevented) return;
    const button = event.currentTarget;
    const box = fixed ? null : scrollParent(button);
    const behavior = scrollBehavior(button);
    if (box) box.scrollTo({ top: 0, behavior });
    else window.scrollTo({ top: 0, behavior });

    // Focus moves to the top too, so the next Tab continues from there rather than from here.
    const scope: ParentNode = box ?? document;
    let destination = target ? document.getElementById(target) : null;
    destination ??=
      Array.from(scope.querySelectorAll<HTMLElement>(FOCUSABLE)).find(
        (element) => element !== button && element.getClientRects().length > 0,
      ) ?? box;
    if (destination && !destination.matches(FOCUSABLE) && !destination.hasAttribute("tabindex")) {
      destination.setAttribute("tabindex", "-1");
    }
    destination?.focus({ preventScroll: true });
  }

  return (
    <button
      type="button"
      ref={ref}
      aria-label={compact && typeof children === "string" ? children : undefined}
      {...rest}
      className={["eq-back-to-top", className].filter(Boolean).join(" ")}
      data-shown={shown || undefined}
      data-compact={compact || undefined}
      data-fixed={fixed || undefined}
      onClick={handleClick}
    >
      <Icon name="arrow-up" size="s" />
      {!compact && <span className="eq-back-to-top-label">{children}</span>}
    </button>
  );
}