import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import { LIGHT, DARK } from '../../../constants/themeColor';
import { sortingOptionsMock } from '../../../../mocks/product/productListing';
import Select from '../Select';

export const options = sortingOptionsMock.options;

<Meta title="Atoms/Select" component={Select} />

# Select
<br />

## `Selects` are wrappers build around the react-select widget.
<br />

### Default
<Canvas>
    <Story name="Default">
        <Select label="Sorted By" name="select" options={options} />
    </Story>
</Canvas>

### Required
<Canvas>
    <Story name="Required">
        <Select label="Sorted By" name="select" options={options} required />
    </Story>
</Canvas>

### Inline
<Canvas>
    <Story name="Inline">
        <Select label="Sorted By" name="select" inline options={options} />
    </Story>
</Canvas>

### Small height
<Canvas>
    <Story name="Small height">
        <Select label="Sorted By" name="select" size="small" options={options} />
    </Story>
</Canvas>

### Hidden label
<Canvas>
    <Story name="Hidden label">
        <Select label="Sorted By" name="select" options={options} hiddenLabel />
    </Story>
</Canvas>

### Color theme
<Canvas>
    <Story name="Color theme">
        <div style={{ width: 200, padding: '30px', backgroundColor: '#F8F8F8' }}>
            <Select label="Theme dark" name="select" value={options[1].value} theme={DARK.value} options={options} />
        </div>
        <div style={{ width: 200, padding: '30px', backgroundColor: 'black' }}>
            <Select label="Theme light" name="select" value={options[1].value} theme={LIGHT.value} options={options} />
        </div>
    </Story>
</Canvas>

### Without background
<Canvas>
    <Story name="Without background">
        <div style={{ width: 200, padding: '30px', backgroundColor: 'red' }}>
            <Select label="Theme Dark" name="select" value={options[1].value} withBackground={false} options={options} />
        </div>
        <div style={{ width: 200, padding: '30px', backgroundColor: 'black', color: 'white' }}>
            <Select label="Theme Light" name="select" value={options[1].value} theme={LIGHT.value} withBackground={false} options={options} />
        </div>
    </Story>
</Canvas>

### Searchable
<Canvas>
    <Story name="Searchable">
        <Select label="Sorted By" name="select" isSearchable options={options} />
    </Story>
</Canvas>

### Button styles
<Canvas>
    <Story name="Button styles">
        <Select label="Sorted By" name="select" type="button" options={options} />
    </Story>
</Canvas>

### With Error
<Canvas>
    <Story name="With error">
        <Select label="Sorted By" name="select" error="This is required" options={options} />
    </Story>
</Canvas>

### Custom width
<Canvas>
    <Story name="Custom width">
        <div style={{ margin: '10px' }}>
            <Select label="200px wide" name="select" width={200} options={options} />
        </div>
        <div style={{ margin: '10px' }}>
            <Select label="300px wide" name="select" width={300} options={options} />
        </div>
        <div style={{ margin: '10px' }}>
            <Select label="400px wide" name="select" width={400} options={options} />
        </div>
    </Story>
</Canvas>


## Usage Example
```jsx
import Select from '@appdirect/sfb-theme-components/src/atoms/select/Select';

<Select
    label="Sorted By"
    name="select"
    options={
        [
            {
                value: 'RELEVANCE',
                label: 'Relevance',
            },
            {
                value: 'POPULARITY',
                label: 'Popularity',
            }
        ]
    }
/>
```
## Props
<ArgsTable of={Select} />
