import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ToggleSwitch from '../ToggleSwitch';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as ToggleSwitchStories from './ToggleSwitch.stories';

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

<Meta of={ToggleSwitchStories} />

# Toggle Switch

<br />

## `ToggleSwitches` are buttons used to switch between states.

<br />

### Default

<Canvas>
  <Story of={ToggleSwitchStories.Default} />
</Canvas>

### Default with legend

<Canvas>
  <Story of={ToggleSwitchStories.DefaultWithLegend} />
</Canvas>

### Small

<Canvas>
  <Story of={ToggleSwitchStories.Small} />
</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} />
