Horizontal gallery

"use client";

import * as React from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

import { cn } from "@/lib/utils";

gsap.registerPlugin(useGSAP, ScrollTrigger);

const STAGE = "(min-width: 768px) and (prefers-reduced-motion: no-preference)";

/** Each image hangs past its frame by 10% a side, so it can pan by 10% of the frame and never show an edge. */
const PAN = (10 / 120) * 100;

type HorizontalGalleryProps = Omit<React.ComponentProps<"div">, "aria-label"> & {
  /** Names the gallery for assistive tech. The scroller is a focusable region. */
  "aria-label": string;
  /** Page scroll per pixel of track. 1 moves the track one pixel for each pixel scrolled. */
  pace?: number;
};

/**
 * Vertical scroll drives a horizontal track while the section is pinned. The markup is a native
 * scroller with snap, so phones, reduced motion and no script all get the same real, swipeable list.
 */
function HorizontalGallery({ pace = 1, className, children, ...props }: HorizontalGalleryProps) {
  const root = React.useRef<HTMLDivElement>(null);
  const total = React.Children.count(children);

  useGSAP(
    () => {
      const media = gsap.matchMedia();
      media.add(STAGE, () => {
        const section = root.current;
        const track = section?.querySelector<HTMLElement>("[data-slot=horizontal-gallery-track]");
        if (!section || !track) return;
        section.setAttribute("data-staged", "");
        section.removeAttribute("tabindex");
        const travel = () => Math.max(0, track.scrollWidth - section.clientWidth);
        const range = () => `+=${travel() * pace}`;

        const slide = gsap.to(track, {
          x: () => -travel(),
          ease: "none",
          scrollTrigger: {
            trigger: section,
            pin: true,
            start: "top top",
            end: range,
            scrub: true,
            invalidateOnRefresh: true,
          },
        });
        gsap.fromTo(
          "[data-slot=horizontal-gallery-progress]",
          { scaleX: 1 / Math.max(total, 1) },
          {
            scaleX: 1,
            ease: "none",
            scrollTrigger: { trigger: section, start: "top top", end: range, scrub: true, invalidateOnRefresh: true },
          },
        );
        gsap.utils.toArray<HTMLElement>("[data-slot=horizontal-gallery-image]").forEach((image) => {
          gsap.fromTo(
            image,
            { xPercent: -PAN },
            {
              xPercent: PAN,
              ease: "none",
              scrollTrigger: {
                trigger: image.parentElement,
                containerAnimation: slide,
                start: "left right",
                end: "right left",
                scrub: true,
              },
            },
          );
        });

        // A focused link in an unseen card must bring its card into view through the page scroll,
        // because the track only moves when the page does.
        const reveal = (event: FocusEvent) => {
          const item = (event.target as HTMLElement).closest<HTMLElement>("[data-slot=horizontal-gallery-item]");
          const trigger = slide.scrollTrigger;
          if (!item || !trigger) return;
          const left = item.offsetLeft - (section.clientWidth - item.offsetWidth) / 2;
          const progress = gsap.utils.clamp(0, 1, left / (travel() || 1));
          window.scrollTo({ top: trigger.start + progress * (trigger.end - trigger.start), behavior: "instant" });
        };
        section.addEventListener("focusin", reveal);

        return () => {
          section.removeEventListener("focusin", reveal);
          section.removeAttribute("data-staged");
          section.setAttribute("tabindex", "0");
        };
      });
      return () => media.revert();
    },
    { scope: root, dependencies: [pace, total] },
  );

  return (
    <div
      ref={root}
      role="region"
      tabIndex={0}
      data-slot="horizontal-gallery"
      className={cn(
        "group/gallery relative flex min-h-dvh snap-x snap-mandatory scroll-px-6 [scrollbar-width:thin] items-center overflow-x-auto overflow-y-hidden overscroll-x-contain bg-background md:scroll-px-8",
        "data-staged:h-dvh data-staged:min-h-96 data-staged:snap-none data-staged:overflow-clip",
        className,
      )}
      {...props}
    >
      <ul
        data-slot="horizontal-gallery-track"
        className="relative m-0 flex w-max list-none items-stretch gap-4 p-0 px-6 md:gap-6 md:px-8"
      >
        {children}
      </ul>
      <div
        aria-hidden="true"
        className="absolute inset-x-8 bottom-8 hidden h-px bg-border group-data-staged/gallery:block"
      >
        <div data-slot="horizontal-gallery-progress" className="size-full origin-left bg-foreground" />
      </div>
    </div>
  );
}

type HorizontalGalleryItemProps = Omit<React.ComponentProps<"li">, "title"> & {
  /** An image for the frame. Leave it out and pass children for a text tile. */
  src?: string;
  /** Describes the image. Empty when the title already says it. */
  alt?: string;
  /** The caption under the image. */
  title?: React.ReactNode;
  /** A short mono label at the end of the caption. */
  meta?: string;
};

/** One stop on the track: a framed image with a caption, or anything you pass as children. */
function HorizontalGalleryItem({
  src,
  alt = "",
  title,
  meta,
  className,
  children,
  ...props
}: HorizontalGalleryItemProps) {
  return (
    <li
      data-slot="horizontal-gallery-item"
      className={cn("flex w-[78vw] shrink-0 snap-start flex-col justify-center md:w-auto", className)}
      {...props}
    >
      {src ? (
        <figure className="m-0">
          <div className="relative h-[64dvh] min-h-72 overflow-hidden rounded-lg border bg-muted md:aspect-3/2">
            {/* eslint-disable-next-line @next/next/no-img-element -- a registry item cannot assume next/image */}
            <img
              data-slot="horizontal-gallery-image"
              src={src}
              alt={alt}
              className="absolute inset-y-0 -left-[10%] h-full w-[120%] max-w-none object-cover"
            />
          </div>
          {title || meta ? (
            <figcaption className="mt-3 flex items-baseline justify-between gap-4">
              <span className="text-sm font-medium text-foreground">{title}</span>
              {meta ? (
                <span className="font-mono text-xs tracking-wide text-muted-foreground uppercase">{meta}</span>
              ) : null}
            </figcaption>
          ) : null}
        </figure>
      ) : null}
      {children}
    </li>
  );
}

export { HorizontalGallery, HorizontalGalleryItem };