Select

'use client';

import * as React from 'react';
import { Select, type SelectOption } from './select';

const PEOPLE: SelectOption[] = [
  { 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: 'natali', label: 'Natali Craig', supportingText: '@natali', disabled: true },
];

const STATUS: SelectOption[] = [
  { value: 'olivia', label: 'Olivia Rhye', supportingText: 'Online', dot: 'fg-success-secondary' },
  { value: 'phoenix', label: 'Phoenix Baker', supportingText: 'Away', dot: 'fg-warning-secondary' },
  { value: 'lana', label: 'Lana Steiner', supportingText: 'Offline', dot: 'fg-quaternary' },
];

function UserIcon() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 20 20"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.67"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M10 10a3.333 3.333 0 1 0 0-6.667A3.333 3.333 0 0 0 10 10Zm-6.667 6.667c0-2.762 2.985-5 6.667-5s6.667 2.238 6.667 5" />
    </svg>
  );
}

/** Sends a key to the element that has focus, as the keyboard would. */
function press(key: string) {
  const target = document.activeElement ?? document.body;
  target.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
  target.dispatchEvent(new KeyboardEvent('keyup', { key, bubbles: true, cancelable: true }));
}

export default function SelectDemo({ replay = 0 }: { replay?: number }) {
  const [open, setOpen] = React.useState(false);
  const [owner, setOwner] = React.useState<string | null>('olivia');

  React.useEffect(() => {
    if (replay === 0) return;
    setOwner(null);
    const timers = [
      window.setTimeout(() => setOpen(true), 0),
      // Base UI opens with no highlight, so the first key lands on the first option.
      window.setTimeout(() => press('ArrowDown'), 500),
      window.setTimeout(() => press('ArrowDown'), 800),
      window.setTimeout(() => press('ArrowDown'), 1100),
      window.setTimeout(() => press('Enter'), 1500),
    ];
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div className="grid w-full max-w-2xl gap-6 sm:grid-cols-2">
      <Select label="Team member" items={PEOPLE} defaultValue="olivia" placeholder="Select team member" />
      <Select
        label="Team member"
        type="icon-leading"
        icon={<UserIcon />}
        items={PEOPLE}
        placeholder="Select team member"
      />
      <Select
        label="Owner"
        type="avatar-leading"
        items={PEOPLE}
        value={owner}
        onValueChange={setOwner}
        open={open}
        onOpenChange={setOpen}
        placeholder="Select team member"
        helpText="The owner gets a message when the task changes."
        hint="Select who owns this task."
      />
      <Select label="Status" type="dot-leading" items={STATUS} defaultValue="olivia" />
      <Select
        label="Reviewer"
        items={PEOPLE}
        required
        invalid
        placeholder="Select team member"
        hint="Select a team member to continue."
      />
      <Select label="Team member" items={PEOPLE} disabled placeholder="Select team member" />
    </div>
  );
}