Icon Button

import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import type { KeyboardEvent, MouseEvent, PointerEvent } from 'react';
import { SPRING, Spring, createLoop, onReducedMotionChange, prefersReducedMotion } from '../shared/spring';
import { resolveAccent, type Accent } from '../shared/accent';
import { devicePx } from '../actions-kit/kit';
import '../shared/ember.css';
import './icon-button.css';

export type IconName = 'plus' | 'close' | 'more' | 'pin';

export interface IconButtonProps {
  icon?: IconName;
  /** The accessible name. Required: the button shows only an icon. */
  label: string;
  size?: 'sm' | 'md' | 'lg';
  /** When defined the button is a toggle and reports its state with aria-pressed. */
  pressed?: boolean;
  disabled?: boolean;
  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
  accent?: Accent;
  className?: string;
}

function Glyph({ icon }: { icon: IconName }) {
  switch (icon) {
    case 'plus':
      return <path d="M8 3.25v9.5M3.25 8h9.5" />;
    case 'close':
      return <path d="M4.25 4.25l7.5 7.5M11.75 4.25l-7.5 7.5" />;
    case 'more':
      return (
        <>
          <circle cx="3.5" cy="8" r="0.75" />
          <circle cx="8" cy="8" r="0.75" />
          <circle cx="12.5" cy="8" r="0.75" />
        </>
      );
    case 'pin':
      return <path d="M5.25 2.5h5.5M6.5 2.5v3.75L4.5 8.75h7l-2-2.5V2.5M8 8.75v4.75" />;
  }
}

export function IconButton({
  icon = 'plus',
  label,
  size = 'md',
  pressed,
  disabled = false,
  onClick,
  accent: accentProp,
  className,
}: IconButtonProps) {
  const accent = resolveAccent(accentProp);
  const toggle = pressed !== undefined;
  const on = !!pressed;

  const rootRef = useRef<HTMLSpanElement>(null);
  const dotRef = useRef<HTMLSpanElement>(null);
  const svgRef = useRef<SVGSVGElement>(null);
  const [down, setDown] = useState(false);

  const sim = useRef({
    dot: new Spring(on ? 1 : 0, SPRING.loose),
    turn: new Spring(on ? 0 : 1, SPRING.loose), // 1 = tilted 45°
    reduced: false,
  });
  const loopRef = useRef<ReturnType<typeof createLoop> | null>(null);

  const apply = () => {
    const s = sim.current;
    const dot = dotRef.current;
    if (dot) {
      const p = s.dot.value;
      const k = Math.max(0, p);
      dot.style.transform = k >= 0.999 && k <= 1.001 ? '' : `translateY(${((1 - p) * 3).toFixed(3)}px) scale(${k.toFixed(4)})`;
      dot.style.visibility = k < 0.01 ? 'hidden' : '';
    }
    const svg = svgRef.current;
    if (svg) {
      const r = icon === 'pin' ? s.turn.value * 45 : 0;
      svg.style.transform = Math.abs(r) < 0.01 ? '' : `rotate(${r.toFixed(3)}deg)`;
    }
  };
  const applyRef = useRef(apply);
  applyRef.current = apply;

  useEffect(() => {
    const s = sim.current;
    s.reduced = prefersReducedMotion();
    const loop = createLoop((dt) => {
      const a = s.dot.step(dt);
      const b = s.turn.step(dt);
      applyRef.current();
      return a || b;
    });
    loopRef.current = loop;
    const unsub = onReducedMotionChange((r) => {
      s.reduced = r;
      if (r) {
        s.dot.set(s.dot.target);
        s.turn.set(s.turn.target);
        applyRef.current();
      }
    });
    return () => {
      loop.stop();
      unsub();
    };
  }, []);

  // Toggle on: the dot springs up from nothing and the pin stands upright. Off: the dot drops away.
  useLayoutEffect(() => {
    const s = sim.current;
    s.dot.config = on ? SPRING.loose : SPRING.snappy;
    s.dot.target = on ? 1 : 0;
    s.turn.target = on ? 0 : 1;
    if (s.reduced) {
      s.dot.set(s.dot.target);
      s.turn.set(s.turn.target);
    }
    apply();
    loopRef.current?.wake();
  }, [on, icon]);

  const sink = () => rootRef.current?.style.setProperty('--em-sink', `${devicePx()}px`);

  const onPointerDown = (e: PointerEvent<HTMLButtonElement>) => {
    if (e.button !== 0) return;
    e.currentTarget.setPointerCapture(e.pointerId);
    sink();
    setDown(true);
  };
  const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {
    if ((e.key === ' ' || e.key === 'Enter') && !e.repeat) {
      sink();
      setDown(true);
    }
  };
  const onKeyUp = (e: KeyboardEvent<HTMLButtonElement>) => {
    if (e.key === ' ' || e.key === 'Enter') setDown(false);
  };
  const up = () => setDown(false);

  return (
    <span
      ref={rootRef}
      className={`ember em-iconbtn${className ? ` ${className}` : ''}`}
      data-accent={accent}
      data-size={size}
      data-on={(toggle && on) || undefined}
      data-down={down || undefined}
    >
      <button
        type="button"
        className="em-iconbtn__btn"
        aria-label={label}
        aria-pressed={toggle ? on : undefined}
        disabled={disabled}
        onPointerDown={onPointerDown}
        onPointerUp={up}
        onPointerCancel={up}
        onLostPointerCapture={up}
        onKeyDown={onKeyDown}
        onKeyUp={onKeyUp}
        onBlur={up}
        onClick={onClick}
      >
        <span className="em-iconbtn__glyph">
          <svg ref={svgRef} className="em-icon" viewBox="0 0 16 16" aria-hidden="true">
            <Glyph icon={icon} />
          </svg>
        </span>
        {toggle ? <span ref={dotRef} className="em-iconbtn__dot" aria-hidden="true" /> : null}
      </button>
    </span>
  );
}

export default IconButton;