Mention menu

'use client';

import * as React from 'react';
import { MentionMenu, type MentionMenuHandle, type MentionTrigger, type MentionValue } from './mention-menu';

const FILES = [
  { id: 'budget', label: 'budget-2027.xlsx', description: 'Spending by team' },
  { id: 'roadmap', label: 'roadmap-q4.md', description: 'Plan for Q4' },
  { id: 'roadmap-old', label: 'roadmap-archive.md', description: 'Older plans' },
  { id: 'notes', label: 'broadcast-notes.md', description: 'Launch call notes' },
  { id: 'brief', label: 'design-brief.pdf', description: 'Goals for the new app' },
  { id: 'faq', label: 'customer-faq.md', description: 'Common questions' },
];
const COMMANDS = [
  { id: 'summarize', label: 'summarize', description: 'Short summary of the text', icon: 'text' as const },
  { id: 'translate', label: 'translate', description: 'Into another language', icon: 'translate' as const },
  { id: 'explain', label: 'explain', description: 'In simple words', icon: 'idea' as const },
];
// A slow search, to show Searching and then No results.
const searchTickets = (query: string) =>
  new Promise<{ id: string; label: string; icon: 'ticket' }[]>((resolve) =>
    window.setTimeout(
      () => resolve(query.startsWith('bug') ? [{ id: 'bug-42', label: 'bug-42', icon: 'ticket' }] : []),
      900,
    ),
  );

const TRIGGERS: MentionTrigger[] = [
  { char: '@', label: 'Files', items: FILES },
  { char: '/', label: 'Commands', items: COMMANDS, startOnly: true, variant: 'command' },
  { char: '#', label: 'Tickets', items: searchTickets },
];

const type = (field: HTMLElement, text: string) => {
  const last = field.lastChild;
  const node = last?.nodeType === 3 ? (last as Text) : field.appendChild(document.createTextNode(''));
  (node as Text).data += text;
  const range = document.createRange();
  range.setStart(node, (node as Text).data.length);
  range.collapse(true);
  const sel = window.getSelection();
  sel?.removeAllRanges();
  sel?.addRange(range);
  field.dispatchEvent(new Event('input', { bubbles: true }));
};
const press = (field: HTMLElement, key: string) =>
  field.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));

export default function MentionMenuDemo({ replay = 0 }: { replay?: number }) {
  const handle = React.useRef<MentionMenuHandle>(null);
  const area = React.useRef<HTMLDivElement>(null);
  const [value, setValue] = React.useState<MentionValue | null>(null);

  // Replay types a message again: the file menu opens at "@road" and Enter makes a chip, then a slow ticket search finds nothing.
  React.useEffect(() => {
    if (replay === 0) return;
    const field = area.current?.querySelector<HTMLElement>('[data-slot="mention-field"]');
    if (!field) return;
    handle.current?.clear();
    field.focus();
    const steps: [number, () => void][] = [];
    let at = 400;
    for (const ch of 'Compare @road') {
      steps.push([at, () => type(field, ch)]);
      at += 70;
    }
    at += 800;
    steps.push([at, () => press(field, 'Enter')]);
    at += 400;
    for (const ch of ' with last year. See #roadm') {
      steps.push([at, () => type(field, ch)]);
      at += 50;
    }
    at += 2400;
    steps.push([at, () => press(field, 'Escape')]);
    const timers = steps.map(([when, run]) => window.setTimeout(run, when));
    return () => {
      for (const id of timers) window.clearTimeout(id);
    };
  }, [replay]);

  return (
    <div ref={area} className="flex w-full max-w-[520px] flex-col gap-3 pt-[220px]">
      <MentionMenu
        ref={handle}
        triggers={TRIGGERS}
        defaultValue={[
          { type: 'text', text: 'Compare ' },
          { type: 'mention', trigger: '@', id: 'budget', label: 'budget-2027.xlsx' },
          { type: 'text', text: ' with last year.' },
        ]}
        onValueChange={setValue}
        onSubmit={setValue}
      />
      <p className="px-1 text-xs text-tertiary" aria-live="polite">
        {value ? `Message text: ${value.text}` : 'Type @ for files, / for commands or # for tickets.'}
      </p>
    </div>
  );
}