Gallery

"use client";

import {
  Children,
  isValidElement,
  useId,
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
  type KeyboardEvent,
  type ReactNode,
} from "react";
import { Lightbox, LightboxItem } from "./lightbox";
import "./gallery.css";

export type GalleryItemProps = {
  /** Shown under or over the thumbnail and in the viewer. */
  caption?: string;
  /** An img with alt text, or an svg with role="img" and a label. Shown as the thumbnail and full size in the viewer. */
  children: ReactNode;
};

/** One picture in a Gallery. It renders nothing by itself; the gallery lays it out. */
export function GalleryItem({ children }: GalleryItemProps) {
  return <>{children}</>;
}

export type GalleryProps = Omit<ComponentProps<"div">, "children"> & {
  /** Names the list and the viewer, e.g. "Site photos". */
  label: string;
  /** Uniform cells cropped to one ratio, or columns where each picture keeps its own shape. */
  layout?: "grid" | "masonry";
  /** Narrowest a column may get, in pixels. Sets how many columns fit. */
  minWidth?: number;
  /** Cell shape for the grid layout, as a CSS aspect-ratio. */
  ratio?: string;
  /** Where captions sit in the grid. They always show in the viewer. */
  captions?: "below" | "overlay" | "hidden";
  /** In the viewer, next on the last picture goes to the first. */
  loop?: boolean;
  /** GalleryItem elements. */
  children: ReactNode;
};

type Direction = "ArrowLeft" | "ArrowRight" | "ArrowUp" | "ArrowDown";

/** The nearest cell in a direction, by position on screen, so it works for both layouts. */
function nearest(cells: HTMLElement[], from: number, direction: Direction): number {
  const origin = cells[from]?.getBoundingClientRect();
  if (!origin) return from;
  const ox = origin.left + origin.width / 2;
  const oy = origin.top + origin.height / 2;
  let best = from;
  let score = Infinity;
  cells.forEach((cell, i) => {
    if (i === from) return;
    const box = cell.getBoundingClientRect();
    const dx = box.left + box.width / 2 - ox;
    const dy = box.top + box.height / 2 - oy;
    const along = { ArrowRight: dx, ArrowLeft: -dx, ArrowDown: dy, ArrowUp: -dy }[direction];
    const across = direction === "ArrowLeft" || direction === "ArrowRight" ? Math.abs(dy) : Math.abs(dx);
    if (along <= 1) return;
    const s = along + across * 3;
    if (s < score) {
      score = s;
      best = i;
    }
  });
  return best;
}

export function Gallery({
  label,
  layout = "grid",
  minWidth = 160,
  ratio = "4 / 3",
  captions = "below",
  loop = false,
  className,
  style,
  children,
  ...rest
}: GalleryProps) {
  const id = useId();
  const viewerId = `${id}-viewer`;
  const list = useRef<HTMLUListElement>(null);
  const [focus, setFocus] = useState(0);
  const [index, setIndex] = useState(0);
  const items = Children.toArray(children).filter(isValidElement<GalleryItemProps>);
  const active = Math.min(focus, Math.max(items.length - 1, 0));

  function cells() {
    return Array.from(list.current?.querySelectorAll<HTMLElement>(".eq-gallery-button") ?? []);
  }

  function move(to: number) {
    const all = cells();
    const cell = all[to];
    if (!cell) return;
    setFocus(to);
    cell.focus();
  }

  function handleKeyDown(event: KeyboardEvent<HTMLUListElement>) {
    if (event.altKey || event.ctrlKey || event.metaKey) return;
    const key = event.key;
    if (key === "ArrowLeft" || key === "ArrowRight" || key === "ArrowUp" || key === "ArrowDown") {
      move(nearest(cells(), active, key));
    } else if (key === "Home") move(0);
    else if (key === "End") move(items.length - 1);
    else return;
    event.preventDefault();
    event.stopPropagation();
  }

  return (
    <div
      {...rest}
      className={["eq-gallery", className].filter(Boolean).join(" ")}
      style={{ ...style, "--_min": `${minWidth}px`, "--_ratio": ratio } as CSSProperties}
      data-layout={layout}
      data-captions={captions}
    >
      <ul ref={list} className="eq-gallery-list" aria-label={label} onKeyDown={handleKeyDown}>
        {items.map((item, i) => (
          <li key={item.key ?? i} className="eq-gallery-item">
            <button
              type="button"
              className="eq-gallery-button"
              tabIndex={i === active ? 0 : -1}
              aria-haspopup="dialog"
              command="show-modal"
              commandfor={viewerId}
              onFocus={() => setFocus(i)}
              onClick={() => setIndex(i)}
            >
              <span className="eq-gallery-frame">{item.props.children}</span>
              {item.props.caption && captions !== "hidden" && (
                <span className="eq-gallery-caption">{item.props.caption}</span>
              )}
            </button>
          </li>
        ))}
      </ul>
      <Lightbox
        id={viewerId}
        label={label}
        index={index}
        onIndexChange={setIndex}
        loop={loop}
        onClose={() => {
          // Back on the picture last shown, not the one that opened the viewer.
          setFocus(index);
          cells()[index]?.focus();
        }}
      >
        {items.map((item, i) => (
          <LightboxItem key={item.key ?? i} caption={item.props.caption}>
            {item.props.children}
          </LightboxItem>
        ))}
      </Lightbox>
    </div>
  );
}