Scroll to top

"use client";

import * as React from "react";
import { ArrowUpIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type ScrollToTopProps = Omit<React.ComponentProps<typeof Button>, "onClick" | "children"> & {
  /** How far down, in px, before the button appears. */
  threshold?: number;
  /** Accessible name. */
  label?: string;
  /** A scrolling element to watch instead of the window. */
  container?: React.RefObject<HTMLElement | null>;
  /** fixed sits on the viewport, absolute sits in the nearest positioned parent. Defaults to absolute when container is set. */
  position?: "fixed" | "absolute";
};

const reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;

/**
 * An icon button in the bottom right corner that appears after scrolling past a threshold
 * and scrolls back to the top. Watches the window, or a scrolling element through container.
 */
export function ScrollToTop({
  threshold = 400,
  label = "Back to top",
  container,
  position = container ? "absolute" : "fixed",
  variant = "outline",
  size = "icon",
  className,
  ...props
}: ScrollToTopProps) {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const element = container?.current;
    const target: HTMLElement | Window = element ?? window;
    const read = () => (element ? element.scrollTop : window.scrollY) > threshold;
    const onScroll = () => setVisible(read());
    target.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => target.removeEventListener("scroll", onScroll);
  }, [container, threshold]);

  const scrollUp = () => {
    const target: HTMLElement | Window = container?.current ?? window;
    target.scrollTo({ top: 0, behavior: reducedMotion() ? "auto" : "smooth" });
  };

  return (
    <Button
      type="button"
      variant={variant}
      size={size}
      aria-label={label}
      inert={!visible}
      data-state={visible ? "visible" : "hidden"}
      onClick={scrollUp}
      className={cn(
        "right-4 bottom-4 z-40 shadow-md transition-[opacity,transform,background-color,color] duration-150 ease-out motion-reduce:transform-none",
        position === "fixed" ? "fixed" : "absolute",
        visible ? "opacity-100" : "pointer-events-none translate-y-1 opacity-0",
        className,
      )}
      {...props}
    >
      <ArrowUpIcon aria-hidden="true" />
    </Button>
  );
}