Chip

"use client";
import * as React from "react";
import { Button } from "@/components/ui/notchset/button";
import { Chip } from "@/components/ui/notchset/chip";

const ALL = ["Owner: Ana Ruiz", "Stage: Proposal", "Closes this quarter"];

export default function ChipDemo() {
  const [chips, setChips] = React.useState(ALL);
  const root = React.useRef<HTMLDivElement>(null);
  /* the control that takes focus once the focused one is gone: the next chip's remove, else the one before, else
     Reset; after Reset, the first chip's. Focus you moved elsewhere is left alone */
  const land = React.useRef<string | null>(null);
  React.useEffect(() => {
    const to = land.current;
    land.current = null;
    if (!to) return;
    const a = document.activeElement;
    if (a && a !== document.body && a.isConnected) return;
    root.current?.querySelector<HTMLElement>(to === "reset" ? "[data-reset]" : `[aria-label="Remove ${CSS.escape(to)}"]`)?.focus();
  }, [chips]);
  const remove = (c: string) => {
    const i = chips.indexOf(c);
    const rest = chips.filter((x) => x !== c);
    land.current = rest[i] ?? rest[i - 1] ?? "reset";
    setChips(rest);
  };
  return (
    <div ref={root} className="flex flex-wrap items-center gap-2">
      {chips.map((c) => (
        <Chip key={c} onRemove={() => remove(c)}>
          {c}
        </Chip>
      ))}
      {chips.length < ALL.length && (
        <Button
          size="sm"
          variant="ghost"
          data-reset=""
          onClick={() => {
            land.current = ALL[0]!;
            setChips(ALL);
          }}
        >
          Reset
        </Button>
      )}
      <Chip>Read only</Chip>
    </div>
  );
}