import { ArgsTable, Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import { Autocomplete } from '.';
import { Props } from './props';

<Meta
  title="Development/Autocomplete"
  component={Autocomplete}
  argTypes={{
    maxVisibleOptions: { table: { category: 'state' } },
    onBlur: { table: { category: 'hooks' } },
    onChange: { table: { category: 'hooks' } },
    onFocus: { table: { category: 'hooks' } },
    renderOption: { table: { category: 'render functions' } },
    style: { table: { category: 'styles' } },
    inputStyle: { table: { category: 'styles' } },
    optionsStyle: { table: { category: 'styles' } },
    closeStyle: { table: { category: 'styles' } },
  }}
/>

export const Template = (args) => <Autocomplete {...args} />;

# Autocomplete

Autocomplete component is an input component which makes you pick from a set of options.

## Default

<Story
  name="Default"
  args={{
    label: 'Example Label',
    options: ['one', 'two', 'three'],
    style: { maxWidth: '400px' },
  }}
>
  {Template.bind({})}
</Story>

<ArgsTable story="Default" />

## Max Visible Options

You can limit the number of options in the list by setting the `maxVisibleOptions` prop which defaults to`3`.

<Story
  name="Max Visible Options"
  args={{
    label: 'Example Label',
    options: ['one', 'two', 'three'],
    renderOption: (option) => <div>{option}</div>,
    style: { maxWidth: '400px' },
    maxVisibleOptions: 1,
  }}
>
  {Template.bind({})}
</Story>

## Render Option

You can render your own option JSX (as you should) with the `renderOption` prop.

<Story
  name="Render Option"
  args={{
    label: 'Example Label',
    options: ['one', 'two', 'three'],
    renderOption: (option) => (
      <div style={{ border: '1px solid red' }}>{option}</div>
    ),
    style: { maxWidth: '400px' },
  }}
>
  {Template.bind({})}
</Story>

## Custom Styles

You can customize the look and feel with the `*Style` props.

<Story
  name="Custom Styles"
  args={{
    label: 'Example Label',
    options: ['one', 'two', 'three'],
    renderOption: (option) => (
      <div style={{ border: '2px solid orange' }}>{option}</div>
    ),
    style: { maxWidth: '400px', border: '2px solid red' },
    inputStyle: { border: '2px solid blue' },
    optionsStyle: { border: '2px solid green' },
    closeStyle: { border: '2px solid deeppink' },
  }}
>
  {Template.bind({})}
</Story>