import {
  Canvas,
  Controls,
  Meta,
  Story,
  Title,
  Subtitle,
} from '@storybook/addon-docs/blocks'
import * as LegacyComboboxStories from './LegacyCombobox.stories'
import { LifecycleTag, SourceLinks } from '../../docs/components'

<Meta of={LegacyComboboxStories} />

<Title>LegacyCombobox</Title>
<Subtitle>
  A searchable dropdown component for selecting from a list of options.
</Subtitle>
<SourceLinks
  links={[
    {
      label: 'Radix UI',
      href: 'https://www.radix-ui.com/primitives/docs/components/popover',
    },
    {
      label: 'cmdk',
      href: 'https://cmdk.paco.me/',
    },
  ]}
/>
<LifecycleTag variant="Legacy" />

<Canvas of={LegacyComboboxStories.Default} sourceState="shown" />
<Controls />

## Components

The LegacyCombobox is composed of several sub-components that work together:

- `LegacyCombobox` - The root component that manages state and context
- `LegacyComboboxTrigger` - The button that opens the dropdown
- `LegacyComboboxValue` - Displays the selected value or placeholder
- `LegacyComboboxContent` - The dropdown container with search input
- `OptionRow` - Individual selectable options within the dropdown

## Import

```tsx
import {
  LegacyCombobox,
  LegacyComboboxTrigger,
  LegacyComboboxValue,
  LegacyComboboxContent,
  OptionRow,
} from '@chainlink/blocks'
```

## Usage

The LegacyCombobox component requires composing multiple sub-components to create a functional dropdown with search capabilities:

```tsx
function NetworkSelector() {
  return (
    <LegacyCombobox placeholder="Select network...">
      <LegacyComboboxTrigger className="w-56">
        <LegacyComboboxValue />
      </LegacyComboboxTrigger>
      <LegacyComboboxContent>
        <OptionRow value="arbitrum">Arbitrum</OptionRow>
        <OptionRow value="avalanche">Avalanche</OptionRow>
        <OptionRow value="base">Base</OptionRow>
        <OptionRow value="ethereum">Ethereum</OptionRow>
      </LegacyComboboxContent>
    </LegacyCombobox>
  )
}
```

## Controlled State

The LegacyCombobox can be used as a controlled component by passing `value` and `onValueChange` props:

```tsx
function ControlledLegacyCombobox() {
  const [value, setValue] = React.useState('')

  return (
    <LegacyCombobox
      value={value}
      onValueChange={setValue}
      placeholder="Select network..."
    >
      <LegacyComboboxTrigger className="w-56">
        <LegacyComboboxValue />
      </LegacyComboboxTrigger>
      <LegacyComboboxContent>
        <OptionRow value="arbitrum">Arbitrum</OptionRow>
        <OptionRow value="avalanche">Avalanche</OptionRow>
      </LegacyComboboxContent>
    </LegacyCombobox>
  )
}
```

## Using LegacyComboboxTrigger with Custom Elements

The `LegacyComboboxTrigger` component can be used with custom elements by setting the `asChild` prop:

```tsx
<LegacyCombobox>
  <LegacyComboboxTrigger asChild>
    <Button variant="secondary">
      <LegacyComboboxValue placeholder="Custom trigger" />
    </Button>
  </LegacyComboboxTrigger>
  <LegacyComboboxContent>
    <OptionRow value="option1">Option 1</OptionRow>
    <OptionRow value="option2">Option 2</OptionRow>
  </LegacyComboboxContent>
</LegacyCombobox>
```

## Examples

### Small Size

<Canvas of={LegacyComboboxStories.SmallSize} sourceState="shown" />

### With Icons

<Canvas of={LegacyComboboxStories.WithIcons} sourceState="shown" />

### With Images

<Canvas of={LegacyComboboxStories.WithImages} sourceState="shown" />

### Non-Clearable

<Canvas of={LegacyComboboxStories.NonClearable} sourceState="shown" />

### Disabled

<Canvas of={LegacyComboboxStories.Disabled} sourceState="shown" />