#AutoComplete

import { AutoComplete, Form, FormField, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

const options = [
  { value: 'Leaf Garden' },
  { value: 'Leaf Studio' },
  { value: 'Pine Forest' },
  { value: 'Archived Garden', disabled: true },
];

export function AutoCompleteBasic() {
  const [value, setValue] = useState('');
  const [selected, setSelected] = useState('');
  return (
    <Form layout="vertical">
      <FormField label="Project name">
        <AutoComplete
          aria-label="Project name"
          placeholder="Type Leaf or enter any text"
          options={options}
          value={value}
          onChange={setValue}
          onSelect={setSelected}
        />
      </FormField>
      <Text tone="muted">
        Input:{value || 'Empty'} · Last selection:{selected || 'None'}
      </Text>
      <FormField label="Disabled suggestions">
        <AutoComplete
          aria-label="Disabled suggestions"
          options={options}
          disabled
          defaultValue="Leaf Garden"
        />
      </FormField>
    </Form>
  );
}

import { AutoComplete, type AutoCompleteOption, Form, FormField, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function AutoCompleteSearch() {
  const [options, setOptions] = useState<AutoCompleteOption[]>([]);
  return (
    <Form layout="vertical">
      <FormField label="Email address">
        <AutoComplete
          aria-label="Email address"
          placeholder="Enter the first part of an email"
          options={options}
          filterOption={false}
          onSearch={(query) => {
            const prefix = query.split('@')[0] ?? '';
            setOptions(
              prefix
                ? ['gmail.com', 'outlook.com', 'icloud.com'].map((domain) => ({
                    value: `${prefix}@${domain}`,
                  }))
                : [],
            );
          }}
        />
      </FormField>
      <Text tone="muted">
        Suggestions are generated as you type. You can also enter a complete address.
      </Text>
    </Form>
  );
}

import { AutoComplete, Button, Space } from '@ifhover/leaf-ui';

import { useState } from 'react';

const options = [
  {
    label: 'Team',
    options: [
      {
        value: 'alice@example.com',
        label: (
          <>
            <strong>Alice</strong> · Design
          </>
        ),
        searchLabel: 'Alice Design',
      },
      {
        value: 'bob@example.com',
        label: (
          <>
            <strong>Bob</strong> · Engineering
          </>
        ),
        searchLabel: 'Bob Engineering',
      },
    ],
  },
];

export function Capabilities() {
  const [state, setState] = useState<'ready' | 'loading' | 'error'>('ready');
  return (
    <Space direction="vertical" align="stretch">
      <Space>
        <Button size="sm" onClick={() => setState('ready')}>
          {'Ready'}
        </Button>
        <Button size="sm" variant="outline" onClick={() => setState('loading')}>
          {'Loading'}
        </Button>
        <Button size="sm" variant="outline" onClick={() => setState('error')}>
          {'Error'}
        </Button>
      </Space>
      <AutoComplete
        aria-label={'Team email'}
        options={state === 'ready' ? options : []}
        loading={state === 'loading'}
        errorContent={
          state === 'error' ? (
            <Button size="sm" variant="ghost" onClick={() => setState('ready')}>
              {'Retry'}
            </Button>
          ) : undefined
        }
        allowClear
        notFoundContent={'No matching teammate'}
      />
    </Space>
  );
}