Snapping

"use client";

import { Radio, RadioGroup } from "@publictheta/ui/components/radio-group/radio-group.tsx";
import {
  Canvas,
  CanvasItem,
  applyItemChanges,
  invertItemChanges,
} from "@publictheta/ui/components/canvas/canvas.tsx";
import type {
  CanvasChangeKind,
  CanvasCopy,
  CanvasItemChange,
  CanvasItemData,
  Rect,
  Viewport,
} from "@publictheta/ui/components/canvas/canvas.tsx";
import { rectUnion } from "@publictheta/ui/algorithms/geometry.ts";
import { Button } from "@publictheta/ui/components/button/button.tsx";
import { isCommandKey } from "@publictheta/ui/lib/platform.ts";
import { createHistory } from "@publictheta/ui/primitives/history.ts";
import { IDENTITY, fit, zoomStop, zoomTo } from "@publictheta/ui/primitives/viewport.ts";
import { useEffect, useRef, useState } from "react";
import type { KeyboardEvent } from "react";
import { Controls, Readout } from "../../ui/controls.tsx";

interface Piece extends CanvasItemData {
  readonly kind: "page" | "panel" | "heading" | "text" | "image";
  readonly name: string;
  readonly text?: string;
}

const PAGE: Rect = { x: 0, y: 0, width: 640, height: 400 };

const PIECES: readonly Piece[] = [
  // The page itself: there to be aligned with and drawn over, not to be moved.
  { id: "page", kind: "page", name: "Page", rect: PAGE, locked: true },
  {
    id: "title",
    kind: "heading",
    name: "Title",
    text: "Autumn catalogue",
    rect: { x: 40, y: 36, width: 300, height: 44 },
  },
  {
    id: "lede",
    kind: "text",
    name: "Introduction",
    text: "Twelve pieces in stoneware, thrown and glazed by hand.",
    rect: { x: 40, y: 100, width: 232, height: 92 },
  },
  { id: "photo", kind: "image", name: "Photograph", rect: { x: 324, y: 100, width: 276, height: 180 } },
  { id: "price", kind: "panel", name: "Price panel", rect: { x: 40, y: 220, width: 232, height: 60 } },
  { id: "strip", kind: "panel", name: "Footer strip", rect: { x: 40, y: 316, width: 560, height: 48 } },
];

/** What undo puts back: places that changed, or the whole list where pieces came or went. */
type Entry =
  | { readonly kind: "places"; readonly changes: readonly CanvasItemChange[] }
  | { readonly kind: "pieces"; readonly before: readonly Piece[]; readonly after: readonly Piece[] };

const clamp = (value: number, least: number, most: number) => Math.min(Math.max(value, least), most);

/** A place held within the page: moved back inside, or — while being resized — cut off at its edge. */
function withinPage(rect: Rect, kind: CanvasChangeKind): Rect {
  if (kind === "move") {
    return {
      ...rect,
      x: clamp(rect.x, PAGE.x, PAGE.x + PAGE.width - rect.width),
      y: clamp(rect.y, PAGE.y, PAGE.y + PAGE.height - rect.height),
    };
  }
  const x = clamp(rect.x, PAGE.x, PAGE.x + PAGE.width);
  const y = clamp(rect.y, PAGE.y, PAGE.y + PAGE.height);
  return {
    x,
    y,
    width: clamp(rect.x + rect.width, x, PAGE.x + PAGE.width) - x,
    height: clamp(rect.y + rect.height, y, PAGE.y + PAGE.height) - y,
  };
}

function renderPiece(piece: Piece) {
  if (piece.kind === "page") {
    return (
      <CanvasItem aria-label={piece.name} className="rounded-sm border border-border-muted bg-surface" />
    );
  }
  if (piece.kind === "image") {
    return (
      <CanvasItem
        aria-label={piece.name}
        className="flex cursor-default items-center justify-center overflow-hidden bg-surface-strong text-fg-muted"
      >
        <svg aria-hidden viewBox="0 0 48 32" className="h-1/2 max-h-16" fill="none" stroke="currentColor">
          <path d="M2 28 16 12l9 10 6-6 15 12" strokeWidth="2" strokeLinejoin="round" />
          <circle cx="36" cy="8" r="4" strokeWidth="2" />
        </svg>
      </CanvasItem>
    );
  }
  if (piece.kind === "heading" || piece.kind === "text") {
    return (
      <CanvasItem
        aria-label={piece.name}
        className={
          piece.kind === "heading"
            ? "cursor-default overflow-hidden text-3xl leading-tight font-semibold text-fg-strong"
            : "cursor-default overflow-hidden text-sm leading-snug text-fg"
        }
      >
        {piece.text}
      </CanvasItem>
    );
  }
  return (
    <CanvasItem
      aria-label={piece.name}
      className="flex cursor-default items-center overflow-hidden rounded-md border border-border bg-surface-muted px-3 text-xs text-fg-muted"
    >
      {piece.name}
    </CanvasItem>
  );
}

const whole = (value: number) => Math.round(value * 10) / 10;

export default function CanvasLayout() {
  const [pieces, setPieces] = useState(PIECES);
  const [selected, setSelected] = useState<readonly string[]>([]);
  const [view, setView] = useState<Viewport>(IDENTITY);
  const [snapping, setSnapping] = useState<"on" | "off">("on");
  const [bounds, setBounds] = useState<"page" | "none">("page");
  const [history] = useState(() => createHistory<Entry>());
  const [, drawAgain] = useState(0);
  const canvas = useRef<HTMLDivElement>(null);
  const copies = useRef(0);

  const size = () => ({ width: canvas.current?.clientWidth ?? 0, height: canvas.current?.clientHeight ?? 0 });
  // Also run once the canvas exists, from the size it turns out to have.
  // oxlint-disable-next-line react/set-state-in-effect
  const fitPage = () => setView(fit(PAGE, size(), { padding: 20 }));
  // A phone's canvas is narrower than the page: begin with the whole page in view.
  // oxlint-disable-next-line react/exhaustive-effect-dependencies -- once
  useEffect(fitPage, []);

  function record(entry: Entry): void {
    history.push(entry);
    drawAgain((count) => count + 1);
  }

  function replace(after: readonly Piece[]): void {
    record({ kind: "pieces", before: pieces, after });
    setPieces(after);
  }

  function step(entry: Entry | undefined, back: boolean): void {
    if (entry === undefined) return;
    if (entry.kind === "pieces") setPieces(back ? entry.before : entry.after);
    else setPieces(applyItemChanges(pieces, back ? invertItemChanges(entry.changes) : entry.changes));
    drawAgain((count) => count + 1);
  }

  function duplicate(made: readonly CanvasCopy[]): void {
    const added = made.flatMap(({ source, rect }) => {
      const original = pieces.find((piece) => piece.id === source);
      copies.current += 1;
      return original === undefined
        ? []
        : [{ ...original, id: `${original.id}-${copies.current}`, name: `${original.name} copy`, rect }];
    });
    replace([...pieces, ...added]);
    setSelected(added.map((piece) => piece.id));
  }

  function onKeyDown(event: KeyboardEvent): void {
    const key = event.key.toLowerCase();
    if (isCommandKey(event) && key === "z") {
      event.preventDefault();
      step(event.shiftKey ? history.redo() : history.undo(), !event.shiftKey);
    } else if (key === "backspace" || key === "delete") {
      const going = new Set(selected);
      const kept = pieces.filter((piece) => piece.locked === true || !going.has(piece.id));
      if (kept.length === pieces.length) return;
      event.preventDefault();
      replace(kept);
      setSelected([]);
    }
  }

  const chosen = pieces.filter((piece) => selected.includes(piece.id));
  const around = rectUnion(chosen.map((piece) => piece.rect));
  const zoomBy = (direction: 1 | -1) => {
    const { width, height } = size();
    setView(zoomTo(view, zoomStop(view.zoom, direction), { x: width / 2, y: height / 2 }));
  };

  return (
    <div className="flex w-full flex-col">
      <Controls>
        <RadioGroup label="Snapping" size="small" value={snapping} onValueChange={setSnapping}>
          <Radio value="on">On</Radio>
          <Radio value="off">Off</Radio>
        </RadioGroup>
        <RadioGroup label="Keep within" size="small" value={bounds} onValueChange={setBounds}>
          <Radio value="page">The page</Radio>
          <Radio value="none">Nothing</Radio>
        </RadioGroup>
      </Controls>
      <div className="mb-2 flex flex-wrap items-center gap-2">
        <Button
          focusableWhenDisabled
          disabled={!history.canUndo()}
          onClick={() => step(history.undo(), true)}
        >
          Undo
        </Button>
        <Button
          focusableWhenDisabled
          disabled={!history.canRedo()}
          onClick={() => step(history.redo(), false)}
        >
          Redo
        </Button>
        <div className="ms-auto flex items-center gap-2">
          <Button size="icon" aria-label="Zoom out" onClick={() => zoomBy(-1)}>
            −
          </Button>
          <output className="w-12 text-center text-xs text-fg-muted tabular-nums">
            {Math.round(view.zoom * 100)}%
          </output>
          <Button size="icon" aria-label="Zoom in" onClick={() => zoomBy(1)}>
            +
          </Button>
          <Button onClick={fitPage}>Fit</Button>
        </div>
      </div>
      <Canvas<Piece>
        ref={canvas}
        aria-label="Catalogue page"
        items={pieces}
        onItemsChange={(changes) => {
          record({ kind: "places", changes });
          setPieces(applyItemChanges(pieces, changes));
        }}
        renderItem={renderPiece}
        value={selected}
        onValueChange={setSelected}
        viewport={view}
        onViewportChange={setView}
        snap={snapping === "on"}
        minSize={8}
        {...(bounds === "page" && {
          constrain: (_: string, rect: Rect, kind: CanvasChangeKind) => withinPage(rect, kind),
        })}
        onDuplicate={duplicate}
        onKeyDown={onKeyDown}
        className="h-[420px] w-full rounded-lg border border-border-muted bg-surface-muted max-sm:h-[340px]"
      />
      <Readout>
        {chosen.length === 0 || around === null
          ? "Nothing selected"
          : `${chosen.length === 1 ? chosen[0]!.name : `${chosen.length} selected`} · ${whole(around.x)}, ${whole(around.y)} · ${whole(around.width)} × ${whole(around.height)}`}
      </Readout>
    </div>
  );
}