drag-list

"use client"

import * as React from "react"
import { Sample } from "@/app/samples"
import { Backdrop } from "@/registry/base-nova/ui/backdrop"
import { CardFooter } from "@/registry/base-nova/ui/card"
import { DragList, type DragListMove } from "@/registry/base-nova/ui/drag-list"
import { CardAuthor, CardKind } from "@/registry/base-nova/ui/item-card"
import {
  type Material,
  MaterialProvider,
} from "@/registry/base-nova/ui/material"
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/registry/base-nova/ui/toggle-group"

// #region checklist
// A release checklist, put in order by carrying its steps, each a card of its kind's
// hue with who does it. Every step goes anywhere. A step pressed without moving opens whole.
type Step = {
  id: string
  title: string
  kind: "build" | "check" | "ship"
  who: string
  face?: string
  note: string
}
const STEPS: Step[] = [
  {
    id: "notes",
    title: "write the release notes",
    kind: "check",
    who: "Adrian Galilea",
    face: "/adriangalilea.jpg",
    note: "What changed for the person using it, in their words.",
  },
  {
    id: "bump",
    title: "bump the version",
    kind: "build",
    who: "Ada Lovelace",
    note: "The version comes from the commits since the last release.",
  },
  {
    id: "build",
    title: "build every platform",
    kind: "build",
    who: "Ada Lovelace",
    note: "The Mac, the phone, the TV: each from the same commit.",
  },
  {
    id: "smoke",
    title: "smoke test on a phone",
    kind: "check",
    who: "Walter Cronkite",
    face: "/people/cronkite.jpg",
    note: "Install it, open it, play a minute of something.",
  },
  {
    id: "ship",
    title: "ship it",
    kind: "ship",
    who: "Adrian Galilea",
    face: "/adriangalilea.jpg",
    note: "Once every check is done.",
  },
]
const HUE: Record<Step["kind"], string> = {
  build: "oklch(68% 0.13 250)",
  check: "oklch(72% 0.14 155)",
  ship: "oklch(70% 0.16 40)",
}

/** The consumer's own move: the list hands it over, the consumer writes it. */
function moved<T>(items: readonly T[], { from, to }: DragListMove<T>): T[] {
  const rest = items.filter((_, i) => i !== from)
  return [...rest.slice(0, to), items[from] as T, ...rest.slice(to)]
}

function Checklist({ material }: { material: Material }) {
  const [steps, setSteps] = React.useState(STEPS)
  return (
    <DragList
      label="release checklist"
      material={material}
      className="w-full max-w-sm"
      items={steps}
      itemId={(s) => s.id}
      name={(s) => s.title}
      tint={(s) => HUE[s.kind]}
      onMove={(move) => setSteps((all) => moved(all, move))}
      onDelete={(s) => setSteps((all) => all.filter((x) => x.id !== s.id))}
      renderItem={(s) => (
        <>
          <CardKind>{s.kind}</CardKind>
          <p className="font-semibold text-sm">{s.title}</p>
          <CardFooter>
            <CardAuthor name={s.who} src={s.face} />
          </CardFooter>
        </>
      )}
      detail={(s) => (
        <>
          <CardKind>{s.kind}</CardKind>
          <p className="text-pretty text-sm text-current/70">{s.note}</p>
          <CardFooter>
            <CardAuthor name={s.who} src={s.face} />
          </CardFooter>
        </>
      )}
    />
  )
}

/** Plain on the page, or glass over one of two pictures, each with light and dark
 *  in it: a valley of dark trees under a pale cliff, a snowfield under a blue sky. */
const LOOKS = {
  plain: null,
  valley: "/lightbox/card.jpg",
  snow: "/lightbox/tall.jpg",
} as const
type Look = keyof typeof LOOKS

function Looks() {
  const [look, setLook] = React.useState<Look>("plain")
  const picture = LOOKS[look]
  return (
    <div className="w-full space-y-4">
      <ToggleGroup
        size="sm"
        aria-label="material"
        value={look}
        onValueChange={(v) => setLook(v as Look)}
      >
        <ToggleGroupItem value="plain">plain</ToggleGroupItem>
        <ToggleGroupItem value="valley">glass, valley</ToggleGroupItem>
        <ToggleGroupItem value="snow">glass, snow</ToggleGroupItem>
      </ToggleGroup>
      {picture === null ? (
        <Checklist material="plain" />
      ) : (
        <MaterialProvider material="glass">
          <Backdrop src={picture} className="w-full rounded-3xl p-6">
            <Checklist material="glass" />
          </Backdrop>
        </MaterialProvider>
      )}
    </div>
  )
}
// #endregion

// #region rule
// A rule, said where it bites: ship stays last. Carry a step below it, or ship above
// any step: the card wears the bad tone and says why; let go there, it flies home and
// leans toward where it was asked to go.
const LAST = ["tag the release", "upload the build", "ship it"]

function ShipLast() {
  const [steps, setSteps] = React.useState(LAST)
  const ship = (all: readonly string[]) => all.length - 1
  return (
    <DragList
      label="release steps, ship last"
      className="w-full max-w-xs"
      items={steps}
      itemId={(s) => s}
      name={(s) => s}
      allows={({ item, to }) =>
        item === "ship it" || to === ship(steps)
          ? "ship stays the last step"
          : true
      }
      onMove={(move) => setSteps((all) => moved(all, move))}
      renderItem={(s) => <p className="text-sm">{s}</p>}
    />
  )
}
// #endregion

// #region page
// A long list in the page: the edge drive scrolls the page itself under the card.
const MANY = Array.from({ length: 24 }, (_, i) => ({
  id: `t${i}`,
  title: `track ${String(i + 1).padStart(2, "0")}`,
}))

function InThePage() {
  const [tracks, setTracks] = React.useState(MANY)
  return (
    <DragList
      label="tracks"
      className="w-full max-w-sm"
      items={tracks}
      itemId={(t) => t.id}
      name={(t) => t.title}
      onMove={(move) => setTracks((all) => moved(all, move))}
      renderItem={(t) => <p className="text-sm tabular-nums">{t.title}</p>}
    />
  )
}
// #endregion

export default function DragListDemo() {
  return (
    <div className="space-y-8">
      <Sample
        name="checklist"
        glance="large"
        title="a checklist, carried into order"
        description="Press and move a step (a finger: hold it first), or Tab in and press space, move it with the arrows, space to put it down, esc to put it back. A step pressed without moving, or Enter, opens it whole; delete takes it out. Plain or glass."
        with="checklist"
      >
        <Looks />
      </Sample>
      <Sample
        name="rule"
        title="a rule, and its refusal said"
        description="allows answers true or the reason: carry a step below ship, or ship anywhere."
        with="checklist rule"
      >
        <ShipLast />
      </Sample>
      <Sample
        name="page"
        title="a long list in the page"
        description="Carry a track toward the window's top or bottom edge: the page scrolls under it, slowly at the zone's edge, faster deeper in, and stops the moment the card leaves the zone."
        with="page"
      >
        <InThePage />
      </Sample>
    </div>
  )
}