Tag input

'use client';

import * as React from 'react';
import { Button } from '../button/button';
import { TagInput, type TagInputHandle, type TagInputSuggestion } from './tag-input';

// Self-drawn placeholder portraits (a head and shoulders on a tinted card), so the demo needs no photos.
const portrait = (bg: string, fg: string) =>
  `data:image/svg+xml,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" fill="${bg}"/><circle cx="32" cy="26" r="11" fill="${fg}"/><path d="M10 64c2-13 11-21 22-21s20 8 22 21z" fill="${fg}"/></svg>`,
  )}`;

const TEAM: TagInputSuggestion[] = [
  { value: 'maya@northwind.io', label: 'Maya Chen', image: portrait('#d9ccf5', '#8b6fd6') },
  { value: 'leo@northwind.io', label: 'Leo Park', image: portrait('#f7d9c4', '#d08a5c') },
  { value: 'ana@northwind.io', label: 'Ana Ruiz' },
  { value: 'marco@northwind.io', label: 'Marco Diaz' },
  { value: 'sam.okafor@northwind.io', label: 'Sam Okafor', image: portrait('#c9e4dc', '#5f9e8a') },
];

// How long the pretend directory takes to find a name (ms).
const LOOKUP = 700;

const validate = (value: string) => (value.includes('@') ? null : 'Enter a full email address.');
const normalize = (value: string) => value.toLowerCase();
const resolve = (value: string) =>
  new Promise<{ label?: string; image?: string } | null>((done) => {
    const person = TEAM.find((p) => p.value === value);
    setTimeout(() => done(person ? { label: person.label, image: person.image } : null), LOOKUP);
  });

/** Types text into the field the way a person would, one letter at a time. */
function typeInto(input: HTMLInputElement, text: string, later: (ms: number, run: () => void) => void) {
  const set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
  for (let i = 0; i < text.length; i++)
    later(i * 45, () => {
      set?.call(input, input.value + (text[i] ?? ''));
      input.dispatchEvent(new Event('input', { bubbles: true }));
    });
}

export default function TagInputDemo({ replay = 0 }: { replay?: number }) {
  const field = React.useRef<TagInputHandle>(null);
  const card = React.useRef<HTMLDivElement>(null);
  const timers = React.useRef<number[]>([]);

  const later = React.useCallback((ms: number, run: () => void) => {
    timers.current.push(window.setTimeout(run, ms));
  }, []);

  React.useEffect(() => {
    if (replay === 0) return;
    for (const timer of timers.current) window.clearTimeout(timer);
    timers.current = [];
    field.current?.clear();
    const input = card.current?.querySelector<HTMLInputElement>('input[role="combobox"]');
    if (!input) return;
    later(400, () => {
      field.current?.focus();
      typeInto(input, 'maya@northwind.io,', later);
    });
    later(2600, () => field.current?.paste('leo@northwind.io, ana@northwind.io, maya@northwind.io, sam'));
  }, [replay, later]);

  React.useEffect(
    () => () => {
      for (const timer of timers.current) window.clearTimeout(timer);
    },
    [],
  );

  return (
    <div
      ref={card}
      className="flex w-full max-w-[448px] flex-col gap-6 rounded-2xl border border-secondary bg-primary p-8 shadow-xs"
    >
      <div className="flex flex-col gap-1">
        <h3 className="text-lg font-semibold text-primary">Invite people</h3>
        <p className="text-sm text-tertiary">Each person gets an email with a link to join.</p>
      </div>
      <TagInput
        ref={field}
        label="Invite by email"
        placeholder="name@company.com"
        hint="Separate addresses with a comma."
        max={8}
        collapse={2}
        suggestions={TEAM}
        validate={validate}
        normalize={normalize}
        resolve={resolve}
        name="invites"
      />
      <div className="flex justify-end gap-3">
        <Button hierarchy="secondary">Cancel</Button>
        <Button>Send invites</Button>
      </div>
    </div>
  );
}