Combobox

'use client';

import * as React from 'react';
import { Combobox, type ComboboxOption } from './combobox';

const PEOPLE: ComboboxOption[] = [
  { value: 'olivia', label: 'Olivia Rhye', supportingText: '@olivia' },
  { value: 'phoenix', label: 'Phoenix Baker', supportingText: '@phoenix' },
  { value: 'lana', label: 'Lana Steiner', supportingText: '@lana' },
  { value: 'demi', label: 'Demi Wilkinson', supportingText: '@demi' },
  { value: 'candice', label: 'Candice Wu', supportingText: '@candice' },
  { value: 'kate', label: 'Kate Morrison', supportingText: '@kate' },
  { value: 'drew', label: 'Drew Cano', supportingText: '@drew' },
];

const TEAMS: (ComboboxOption & { users: number })[] = [
  { value: 'engineering', label: 'Engineering', supportingText: '12 users', users: 12 },
  { value: 'design', label: 'Design', supportingText: '10 users', users: 10 },
  { value: 'product', label: 'Product', supportingText: '6 users', users: 6 },
  { value: 'marketing', label: 'Marketing', supportingText: '8 users', users: 8 },
  { value: 'sales', label: 'Sales', supportingText: '12 users', users: 12 },
  { value: 'success', label: 'Customer success', supportingText: '4 users', users: 4 },
  { value: 'operations', label: 'Operations', supportingText: '2 users', users: 2 },
];

const REVIEWERS = ['olivia', 'phoenix'];

/** Types into an input the way the keyboard would, so the field filters and opens. */
function typeInto(input: HTMLInputElement, text: string) {
  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, text);
  input.dispatchEvent(new Event('input', { bubbles: true }));
}

function press(key: string) {
  const target = document.activeElement ?? document.body;
  target.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
}

export default function ComboboxDemo({ replay = 0 }: { replay?: number }) {
  const [reviewers, setReviewers] = React.useState<string[]>(REVIEWERS);
  const [reviewersOpen, setReviewersOpen] = React.useState(false);
  const [teams, setTeams] = React.useState<string[]>(['design', 'product']);
  const reviewersRef = React.useRef<HTMLDivElement>(null);
  const users = TEAMS.filter((team) => teams.includes(team.value)).reduce((sum, team) => sum + team.users, 0);

  React.useEffect(() => {
    if (replay === 0) return;
    setReviewers(REVIEWERS);
    const input = () =>
      reviewersRef.current?.querySelector('input:not([type="hidden"])') as HTMLInputElement | null;
    const timers = [
      window.setTimeout(() => input()?.focus(), 0),
      window.setTimeout(() => {
        setReviewersOpen(true);
        const el = input();
        if (el) typeInto(el, 'k');
      }, 300),
      window.setTimeout(() => {
        const el = input();
        if (el) typeInto(el, 'ka');
      }, 550),
      window.setTimeout(() => press('ArrowDown'), 950),
      window.setTimeout(() => press('Enter'), 1300),
      window.setTimeout(() => setReviewersOpen(false), 2000),
    ];
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <Combobox label="Assign to" items={PEOPLE} placeholder="Search" shortcut="⌘K" />
      <div ref={reviewersRef}>
        <Combobox
          type="tags"
          label="Reviewers"
          items={PEOPLE}
          itemLeading="avatar-leading"
          value={reviewers}
          open={reviewersOpen}
          onOpenChange={setReviewersOpen}
          onValueChange={(next) => setReviewers(next as string[])}
          placeholder="Add a reviewer"
        />
      </div>
      <Combobox
        type="multi-select"
        label="Teams"
        items={TEAMS}
        value={teams}
        onValueChange={(next) => setTeams(next as string[])}
        summary={`${users} users`}
        placeholder="Select teams"
        searchPlaceholder="Search teams"
        emptyTitle="No teams found"
        hint="The teams get a message when you post."
      />
    </div>
  );
}