Command palette

'use client';

import * as React from 'react';
import { CommandPalette, type CommandPaletteItem } from './command-palette';

/** Own 16px marks for the demo rows. */
const MARKS = {
  home: 'M2 6.667 8 2l6 4.667v6.666A1.333 1.333 0 0 1 12.667 14.667H3.333A1.333 1.333 0 0 1 2 13.333zM6 14.667V8h4v6.667',
  folder:
    'M14.667 12a1.333 1.333 0 0 1-1.334 1.333H2.667A1.333 1.333 0 0 1 1.333 12V3.333C1.333 2.597 1.93 2 2.667 2H6l1.333 2h6c.737 0 1.334.597 1.334 1.333z',
  settings:
    'M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM12.933 10a1.1 1.1 0 0 0 .22 1.213l.04.04a1.333 1.333 0 1 1-1.886 1.887l-.04-.04a1.1 1.1 0 0 0-1.867.78v.12a1.333 1.333 0 1 1-2.667 0v-.06a1.1 1.1 0 0 0-1.733-.84l-.04.04A1.333 1.333 0 1 1 3.073 11.253l.04-.04A1.1 1.1 0 0 0 2.333 9.347H2.2a1.333 1.333 0 1 1 0-2.667h.06a1.1 1.1 0 0 0 .84-1.733l-.04-.04A1.333 1.333 0 1 1 4.947 3.02l.04.04a1.1 1.1 0 0 0 1.213.22h.053a1.1 1.1 0 0 0 .667-1.007V2.2a1.333 1.333 0 1 1 2.667 0v.06a1.1 1.1 0 0 0 .666 1.007 1.1 1.1 0 0 0 1.214-.22l.04-.04a1.333 1.333 0 1 1 1.886 1.886l-.04.04a1.1 1.1 0 0 0-.22 1.214v.053a1.1 1.1 0 0 0 1.007.667h.133a1.333 1.333 0 1 1 0 2.666h-.06a1.1 1.1 0 0 0-1.007.667',
  plus: 'M8 3.333v9.334M3.333 8h9.334',
  link: 'M6.667 8.667a3.333 3.333 0 0 0 5.026.36l2-2a3.333 3.333 0 0 0-4.713-4.714l-1.147 1.14M9.333 7.333a3.333 3.333 0 0 0-5.026-.36l-2 2a3.333 3.333 0 0 0 4.713 4.714l1.14-1.14',
  palette:
    'M8 14.667A6.667 6.667 0 1 1 14.667 8c0 1.473-1.194 2-2.667 2h-1.333a1.333 1.333 0 0 0-1 2.2c.333.4.333.8.333 1.133 0 .8-.667 1.334-2 1.334zM4.667 8h.006M6 5.333h.007M9.333 4.667h.007M11.333 6.667h.007',
};

function Mark({ d }: { d: string }) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d={d} />
    </svg>
  );
}

/** Sets a field's text the way typing does, so React and Vue both see the change. */
function typeInto(input: HTMLInputElement | null | undefined, text: string) {
  if (!input) return;
  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, text);
  input.dispatchEvent(new Event('input', { bubbles: true }));
  input.dispatchEvent(new Event('change', { bubbles: true }));
}

export default function CommandPaletteDemo({ replay = 0 }: { replay?: number }) {
  const [note, setNote] = React.useState('Pick a command to see the result here.');
  const rootRef = React.useRef<HTMLDivElement>(null);

  const items = React.useMemo<CommandPaletteItem[]>(() => {
    const theme = (name: string): CommandPaletteItem => ({
      id: `theme-${name}`,
      label: name,
      onSelect: () => setNote(`Theme set to ${name}.`),
    });
    return [
      {
        id: 'home',
        label: 'Home',
        group: 'Go to',
        icon: <Mark d={MARKS.home} />,
        onSelect: () => setNote('Opened Home.'),
      },
      {
        id: 'projects',
        label: 'Projects',
        group: 'Go to',
        icon: <Mark d={MARKS.folder} />,
        onSelect: () => setNote('Opened Projects.'),
      },
      {
        id: 'settings',
        label: 'Settings',
        group: 'Go to',
        icon: <Mark d={MARKS.settings} />,
        onSelect: () => setNote('Opened Settings.'),
      },
      {
        id: 'new',
        label: 'New project',
        group: 'Actions',
        icon: <Mark d={MARKS.plus} />,
        shortcut: ['mod', 'N'],
        keywords: ['create'],
        onSelect: () => setNote('Started a new project.'),
      },
      {
        id: 'copy',
        label: 'Copy link',
        group: 'Actions',
        icon: <Mark d={MARKS.link} />,
        onSelect: () =>
          new Promise<void>((resolve) =>
            window.setTimeout(() => {
              setNote('Link copied.');
              resolve();
            }, 700),
          ),
      },
      {
        id: 'theme',
        label: 'Change theme',
        group: 'Actions',
        icon: <Mark d={MARKS.palette} />,
        items: [theme('Light'), theme('Dark'), theme('System')],
      },
    ];
  }, []);

  // Replay: open, type "proj", clear, open Change theme and pick Dark, then open again and run Copy link.
  React.useEffect(() => {
    if (replay === 0) return;
    const root = rootRef.current;
    const pill = () => root?.querySelector<HTMLButtonElement>('button[aria-haspopup="dialog"]');
    const field = () => root?.querySelector<HTMLInputElement>('[role="combobox"]');
    const key = (k: string) =>
      field()?.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true }));
    const steps: [number, () => void][] = [
      [0, () => pill()?.click()],
      [700, () => typeInto(field(), 'p')],
      [800, () => typeInto(field(), 'pr')],
      [900, () => typeInto(field(), 'pro')],
      [1000, () => typeInto(field(), 'proj')],
      [1900, () => typeInto(field(), '')],
      [2400, () => key('End')],
      [2800, () => key('Enter')],
      [3500, () => key('ArrowDown')],
      [3900, () => key('Enter')],
      [4900, () => pill()?.click()],
      [5600, () => typeInto(field(), 'copy')],
      [6200, () => key('Enter')],
    ];
    const timers = steps.map(([at, run]) => window.setTimeout(run, at));
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div ref={rootRef} className="flex min-h-48 flex-col items-center justify-center gap-3">
      <CommandPalette items={items} />
      <p className="text-sm text-tertiary" aria-live="polite">
        {note}
      </p>
    </div>
  );
}