import { useState } from 'react';
import {
  ArgsTable,
  Canvas,
  Meta,
  Source,
  Story
} from '@storybook/addon-docs/blocks';
import Select from 'components/Select';
import CWBTheme, { ThemeProvider } from 'styles/CWBTheme';

<Meta title="Components API/Select" component={Select} />

# Select

Allows the user to select one option among many options.

<Canvas>
  <Story name="Select" height="150px">
    {() => {
      const [value, setValue] = useState(null);
      return (
        <Select
          options={[
            { label: 'Actor', value: 'actor' },
            { label: 'Agent', value: 'agent' },
            { label: 'Casting Director', value: 'director' }
          ]}
          placeholder="Select one"
          value={value}
          onSelect={setValue}
        />
      );
    }}
  </Story>
</Canvas>

<Source code="import { Select } from 'cwb-react';" />

## Usage

You can choose to display a label for the Select. If a value is `required`, a "\*" will be displayed at the end of the label.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <div
      style={{
        width: '340px',
        height: '112px',
        display: 'flex',
        justifyContent: 'space-between'
      }}
    >
      <Select
        style={{ width: '160px' }}
        label="Optional Select"
        options={[]}
        onSelect={() => {}}
      />
      <Select
        style={{ width: '160px' }}
        label="Mandatory Select"
        options={[]}
        required
        onSelect={() => {}}
      />
    </div>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<Select\n' +
        '  label="Optional Select"\n' +
        `  options={[]}\n` +
        '  onSelect={() => {}}\n' +
        '/>\n' +
        '<Select\n' +
        '  label="Mandatory Select"\n' +
        `  options={[]}\n` +
        '  required\n' +
        '  onSelect={() => {}}\n' +
        '/>'
      }
    />
  </div>
</ThemeProvider>

In order to control a Select's dropdown menu, you can use the `isMenuOpen` prop. In the below example, the menu is always open, since `isMenuOpen` is always true.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <div style={{ height: '88px' }}>
      <Select
        isMenuOpen
        options={[{ label: 'Option 1', value: 1 }]}
        onSelect={() => {}}
      />
    </div>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<Select\n' +
        '  isMenuOpen\n' +
        `  options={[{ label: 'Option 1', value: 1 }]}\n` +
        '  onSelect={() => {}}\n' +
        '/>'
      }
    />
  </div>
</ThemeProvider>

Similar to TextInputs, Selects can also display error states, with an optional message.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <div
      style={{
        width: '420px',
        height: '112px',
        display: 'flex',
        justifyContent: 'space-between'
      }}
    >
      <Select
        style={{ width: '200px' }}
        error
        label="Error State without Message"
        options={[]}
        onSelect={() => {}}
      />
      <Select
        style={{ width: '200px' }}
        error
        errorMessage="Error message goes here."
        label="Error State with Message"
        options={[]}
        onSelect={() => {}}
      />
    </div>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<Select\n' +
        '  error\n' +
        '  label="Error State without Message"\n' +
        '  options={[]}\n' +
        '  onSelect={() => {}}\n' +
        '/>\n' +
        '<Select\n' +
        '  error\n' +
        '  errorMessage="Error message goes here."\n' +
        '  label="Error State with Message"\n' +
        '  options={[]}\n' +
        '  onSelect={() => {}}\n' +
        '/>'
      }
    />
  </div>
</ThemeProvider>

If the options are fetched asynchoronously, you can use the `isLoading` prop to toggle a loading state.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <div style={{ height: '88px' }}>
      <Select isLoading options={[]} onSelect={() => {}} />
    </div>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<Select\n' +
        '  isLoading\n' +
        '  options={[]}\n' +
        '  onSelect={() => {}}\n' +
        '/>'
      }
    />
  </div>
</ThemeProvider>

Selects can also be configured to allow the user to add an option. To enable adding options, `allowAdd` has to be true, and an `onAdd` callback should be defined. Optionally, you can change the button text with the `addOptionText` prop.

<ThemeProvider theme={CWBTheme}>
  <Canvas style={{ marginBottom: '0' }}>
    <div style={{ height: '120px' }}>
      <Select
        addOptionText="new option"
        allowAdd
        options={[{ label: 'Option 1', value: 1 }]}
        onAdd={() => console.log('handleAdd')}
        onSelect={() => {}}
      />
    </div>
  </Canvas>
  <div style={{ marginTop: '-20px' }}>
    <Source
      code={
        '<Select\n' +
        '  addOptionText="new option"\n' +
        '  allowAdd\n' +
        `  options={[{ label: 'Option 1', value: 1 }]}\n` +
        `  onAdd={() => console.log('handleAdd')}\n` +
        '  onSelect={() => {}}\n' +
        '/>'
      }
    />
  </div>
</ThemeProvider>

## Props

<ArgsTable />