import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import ToggleSwitch from '../ToggleSwitch';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';

export const viewModeOptions = (gridId, listId) => [{
    id: gridId,
    value: 'grid',
    label: 'Grid',
    selected: true
}, {
    id: listId,
    value: 'list',
    label: 'List',
    selected: false
}];

<Meta title="Atoms/Toggle Switch" component={ToggleSwitch} />

# Toggle Switch
<br />

## `ToggleSwitches` are buttons used to switch between states.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ToggleSwitch name="toggle1" legend="View Mode: " options={viewModeOptions('grid1', 'list1')} />
    </Story>
</Canvas>

### Default with legend
<Canvas>
    <Story name="Default with legend">
        <ToggleSwitch name="toggle2" legend="View Mode: " showLegend options={viewModeOptions('grid2', 'list2')} />
    </Story>
</Canvas>

### Small
<Canvas>
    <Story name="Small">
        <ToggleSwitch name="toggle3" legend="View Mode: " size="small" options={viewModeOptions('grid3', 'list3')} />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="optionsObj"
    code={viewModeOptions('gridId', 'listId')}
/>

```jsx
import ToggleSwitch from '@appdirect/sfb-theme-components/src/atoms/toggle-switch/ToggleSwitch'

<ToggleSwitch
    name="toggle"
    legend="View Mode: "
    showLegend
    size="small"
    options={optionsObj}
    onChange={callbackFunction}
/>
```
## Props
<ArgsTable of={ToggleSwitch} />
