Lightbox

"use client";

import {
  Children,
  isValidElement,
  useEffect,
  useRef,
  useState,
  type ComponentProps,
  type KeyboardEvent,
  type MouseEvent,
  type PointerEvent,
  type ReactNode,
} from "react";
import { Button } from "./button";
import "./lightbox.css";

// React 19 does not type invoker commands yet. This lets any button take them.
declare module "react" {
  interface ButtonHTMLAttributes<T> {
    command?: string;
    commandfor?: string;
  }
}

export type LightboxItemProps = ComponentProps<"figure"> & {
  /** Shown and announced with the counter while this item is on screen. */
  caption?: string;
  /** An img, an svg or any element. Images keep their aspect and fit the viewport. */
  children: ReactNode;
};

export function LightboxItem({ caption, className, children, ...rest }: LightboxItemProps) {
  return (
    <figure aria-label={caption} {...rest} className={["eq-lightbox-item", className].filter(Boolean).join(" ")}>
      {children}
    </figure>
  );
}

export type LightboxProps = Omit<ComponentProps<"dialog">, "children"> & {
  /** Required. Openers point at it with command="show-modal" and commandfor. */
  id: string;
  /** Names the viewer, e.g. "Site photos". */
  label: string;
  /** The item on screen, when you control it. */
  index?: number;
  /** The item shown first. */
  defaultIndex?: number;
  onIndexChange?: (index: number) => void;
  /** Next on the last item goes back to the first, and the other way round. */
  loop?: boolean;
  /** LightboxItem elements. */
  children: ReactNode;
};

const SWIPE = 48;

function Icon({ d }: { d: string }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={d} />
    </svg>
  );
}

export function Lightbox({
  id,
  label,
  index,
  defaultIndex = 0,
  onIndexChange,
  loop = false,
  className,
  onClick,
  onKeyDown,
  onPointerDown,
  children,
  ...rest
}: LightboxProps) {
  const dialog = useRef<HTMLDialogElement>(null);
  const stage = useRef<HTMLDivElement>(null);
  const swipe = useRef<{ x: number; moved: boolean } | null>(null);
  const swallowClick = useRef(false);
  const [inner, setInner] = useState(defaultIndex);
  const items = Children.toArray(children).filter(isValidElement<LightboxItemProps>);
  const count = items.length;
  const current = Math.min(Math.max(index ?? inner, 0), Math.max(count - 1, 0));
  const atStart = !loop && current === 0;
  const atEnd = !loop && current === count - 1;
  const caption = items[current]?.props.caption;
  const single = count === 1;

  // Invoker commands where the engine lacks them, as Dialog does.
  useEffect(() => {
    if ("command" in HTMLButtonElement.prototype) return;
    function invoke(event: globalThis.MouseEvent) {
      if (!(event.target instanceof Element)) return;
      const invoker = event.target.closest("button[commandfor]");
      if (!invoker || invoker.getAttribute("commandfor") !== id) return;
      const element = document.getElementById(id);
      if (!(element instanceof HTMLDialogElement)) return;
      const command = invoker.getAttribute("command");
      if (command === "show-modal" && !element.open) element.showModal();
      if ((command === "close" || command === "request-close") && element.open) element.close();
    }
    document.addEventListener("click", invoke);
    return () => document.removeEventListener("click", invoke);
  }, [id]);

  function go(to: number) {
    if (count === 0) return;
    const next = loop ? (to + count) % count : Math.min(Math.max(to, 0), count - 1);
    if (next === current) return;
    if (index === undefined) setInner(next);
    onIndexChange?.(next);
  }

  function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {
    onKeyDown?.(event);
    if (event.defaultPrevented || event.altKey || event.metaKey || event.ctrlKey) return;
    if (event.key === "ArrowLeft") go(current - 1);
    else if (event.key === "ArrowRight") go(current + 1);
    else if (event.key === "Home") go(0);
    else if (event.key === "End") go(count - 1);
    else return;
    event.preventDefault();
  }

  // Anything that is not the content or a control counts as the backdrop.
  function handleClick(event: MouseEvent<HTMLDialogElement>) {
    onClick?.(event);
    if (swallowClick.current) {
      swallowClick.current = false;
      return;
    }
    if (event.defaultPrevented || !(event.target instanceof Element)) return;
    if (event.target.closest(".eq-lightbox-item, .eq-lightbox-bar, .eq-lightbox-close")) return;
    dialog.current?.close();
  }

  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {
    if (event.pointerType === "mouse" || count < 2) return;
    swipe.current = { x: event.clientX, moved: false };
  }

  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
    const start = swipe.current;
    if (!start) return;
    const dx = event.clientX - start.x;
    // Capture only once it is clearly a swipe, so a tap still lands on what was tapped.
    if (!start.moved && Math.abs(dx) > 8) {
      start.moved = true;
      event.currentTarget.setPointerCapture(event.pointerId);
      event.currentTarget.setAttribute("data-swiping", "");
    }
    if (start.moved) event.currentTarget.style.setProperty("--_drag", `${dx}px`);
  }

  function endSwipe(event: PointerEvent<HTMLDivElement>, commit: boolean) {
    const start = swipe.current;
    swipe.current = null;
    const node = stage.current;
    if (!start?.moved || !node) return;
    node.removeAttribute("data-swiping");
    node.style.removeProperty("--_drag");
    swallowClick.current = true;
    const dx = event.clientX - start.x;
    if (commit && Math.abs(dx) > SWIPE) go(current + (dx < 0 ? 1 : -1));
  }

  return (
    <dialog
      ref={dialog}
      aria-label={label}
      {...rest}
      id={id}
      className={["eq-lightbox", className].filter(Boolean).join(" ")}
      onClick={handleClick}
      onKeyDown={handleKeyDown}
      onPointerDown={(event) => {
        onPointerDown?.(event);
        swallowClick.current = false;
      }}
    >
      <div className="eq-lightbox-close">
        <Button
          variant="ghost"
          aria-label="Close"
          onClick={() => dialog.current?.close()}
          lead={<Icon d="M4 4l8 8M12 4l-8 8" />}
        />
      </div>
      <div
        ref={stage}
        className="eq-lightbox-stage"
        onPointerDown={handlePointerDown}
        onPointerMove={handlePointerMove}
        onPointerUp={(event) => endSwipe(event, true)}
        onPointerCancel={(event) => endSwipe(event, false)}
      >
        {items.map((item, i) => (
          <div
            key={item.key ?? i}
            className="eq-lightbox-slide"
            data-position={i < current ? "before" : i > current ? "after" : "current"}
            inert={i !== current}
          >
            {item}
          </div>
        ))}
      </div>
      {single ? (
        // One item: nothing to step through, so no arrows and no counter, and no bar without a caption.
        caption && (
          <div className="eq-lightbox-bar" data-single="">
            <p className="eq-lightbox-status" aria-live="polite" aria-atomic="true">
              <span className="eq-lightbox-caption">{caption}</span>
            </p>
          </div>
        )
      ) : (
        <div className="eq-lightbox-bar">
          <Button
            variant="ghost"
            aria-label="Previous"
            aria-disabled={atStart || undefined}
            onClick={() => go(current - 1)}
            lead={<Icon d="M10 3.5 5.5 8l4.5 4.5" />}
          />
          <p className="eq-lightbox-status" aria-live="polite" aria-atomic="true">
            <span className="eq-lightbox-count">
              {count === 0 ? "Nothing to show" : `${current + 1} of ${count}`}
            </span>
            {caption && <span className="eq-lightbox-caption">{caption}</span>}
          </p>
          <Button
            variant="ghost"
            aria-label="Next"
            aria-disabled={atEnd || undefined}
            onClick={() => go(current + 1)}
            lead={<Icon d="M6 3.5 10.5 8 6 12.5" />}
          />
        </div>
      )}
    </dialog>
  );
}