Compare

"use client";

import {
  useRef,
  useState,
  type ComponentProps,
  type CSSProperties,
  type KeyboardEvent,
  type PointerEvent,
  type ReactNode,
} from "react";
import "./compare.css";

export type CompareProps = Omit<ComponentProps<"div">, "children"> & {
  /** Names the divider for assistive tech, e.g. "Homepage redesign". */
  label: string;
  /** Divider position in percent from the start edge, when you control it. */
  position?: number;
  /** Divider position on first render, when you do not. */
  defaultPosition?: number;
  onPositionChange?: (position: number) => void;
  orientation?: "horizontal" | "vertical";
  /** Shown on the start side of the divider. */
  before: ReactNode;
  /** Shown on the end side of the divider. */
  after: ReactNode;
  beforeLabel?: string;
  afterLabel?: string;
};

/* A corner label fades once the divider comes within this many percent of it. */
const LABEL_ROOM = 22;

const clamp = (n: number) => Math.min(100, Math.max(0, n));

export function Compare({
  label,
  position: controlled,
  defaultPosition = 50,
  onPositionChange,
  orientation = "horizontal",
  before,
  after,
  beforeLabel = "Before",
  afterLabel = "After",
  className,
  style,
  onPointerDown,
  onPointerMove,
  onPointerUp,
  onPointerCancel,
  ...rest
}: CompareProps) {
  const [uncontrolled, setUncontrolled] = useState(clamp(defaultPosition));
  const position = clamp(controlled ?? uncontrolled);
  const [dragging, setDragging] = useState(false);
  /* Track clicks, keys and outside changes glide on the spring; a drag follows the pointer exactly. */
  const [glide, setGlide] = useState(false);
  const vertical = orientation === "vertical";
  const pressAt = useRef({ x: 0, y: 0 });

  function set(next: number, animate: boolean) {
    const value = Math.round(clamp(next) * 10) / 10;
    setGlide(animate);
    if (value === position) return;
    if (controlled === undefined) setUncontrolled(value);
    onPositionChange?.(value);
  }

  function fromPointer(event: PointerEvent<HTMLDivElement>) {
    const box = event.currentTarget.getBoundingClientRect();
    return vertical
      ? ((event.clientY - box.top) / box.height) * 100
      : ((event.clientX - box.left) / box.width) * 100;
  }

  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {
    onPointerDown?.(event);
    if (event.defaultPrevented || event.button !== 0) return;
    pressAt.current = { x: event.clientX, y: event.clientY };
    event.preventDefault();
    event.currentTarget.setPointerCapture(event.pointerId);
    const onHandle = event.target instanceof Element && event.target.closest(".eq-compare-handle");
    setDragging(true);
    if (onHandle) setGlide(false);
    else set(fromPointer(event), true);
    event.currentTarget.querySelector<HTMLElement>(".eq-compare-handle")?.focus({ preventScroll: true });
  }

  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {
    onPointerMove?.(event);
    if (!dragging) return;
    /* Let a track click finish its glide unless the pointer really moves. */
    if (glide && Math.hypot(event.clientX - pressAt.current.x, event.clientY - pressAt.current.y) < 4) return;
    set(fromPointer(event), false);
  }

  function stop() {
    setDragging(false);
  }

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    const step = event.shiftKey ? 10 : 1;
    const keys: Record<string, number> = vertical
      ? { ArrowUp: -step, ArrowDown: step, ArrowLeft: -step, ArrowRight: step, PageUp: -10, PageDown: 10 }
      : { ArrowLeft: -step, ArrowRight: step, ArrowDown: -step, ArrowUp: step, PageDown: -10, PageUp: 10 };
    let next: number | undefined;
    if (event.key in keys) next = position + keys[event.key];
    else if (event.key === "Home") next = 0;
    else if (event.key === "End") next = 100;
    if (next === undefined) return;
    event.preventDefault();
    event.stopPropagation();
    set(next, true);
  }

  const rounded = Math.round(position);

  return (
    <div
      {...rest}
      className={["eq-compare", className].filter(Boolean).join(" ")}
      style={{ ...style, "--_pos": `${position}%` } as CSSProperties}
      data-orientation={orientation}
      data-dragging={dragging ? "" : undefined}
      data-glide={glide || !dragging ? "" : undefined}
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      onPointerUp={(event) => {
        onPointerUp?.(event);
        stop();
      }}
      onPointerCancel={(event) => {
        onPointerCancel?.(event);
        stop();
      }}
      onLostPointerCapture={stop}
    >
      <div className="eq-compare-layer" data-layer="before">
        {before}
      </div>
      <div className="eq-compare-layer" data-layer="after">
        {after}
      </div>
      <span className="eq-compare-label" data-side="before" data-hidden={position < LABEL_ROOM ? "" : undefined} aria-hidden="true">
        {beforeLabel}
      </span>
      <span className="eq-compare-label" data-side="after" data-hidden={position > 100 - LABEL_ROOM ? "" : undefined} aria-hidden="true">
        {afterLabel}
      </span>
      <div className="eq-compare-divider">
        <div
          role="slider"
          tabIndex={0}
          aria-label={label}
          aria-orientation={orientation}
          aria-valuemin={0}
          aria-valuemax={100}
          aria-valuenow={rounded}
          aria-valuetext={`${rounded}% ${beforeLabel.toLowerCase()}, ${100 - rounded}% ${afterLabel.toLowerCase()}`}
          className="eq-compare-handle"
          onKeyDown={handleKeyDown}
        >
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M6 4.5L2.5 8 6 11.5M10 4.5l3.5 3.5-3.5 3.5" />
          </svg>
        </div>
      </div>
    </div>
  );
}