import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';

import { SwitchButton } from '../';
import { SimpleSwitchButton } from './switch-button.stories.js';

<Meta title='Material/Switch' component={SwitchButton} decorators={[withKnobs]}/>

<Title>Switch Button</Title>

<Description>
  Switch com botões dos aplicativos Eureca.
</Description>

<Preview>
  <Story name="Switch Button">
    <SimpleSwitchButton />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| options | Array de objetos com os valores dos botões <br /> [{name: 'string', value: 'number' \| 'string' }] | - |
| buttonStyle | Objeto para override de estilo do botão <br /> object | - |
| boxStyle | Objeto para override de estilo do box <br /> object | - |
| onChange | Função de onChange do switch <br /> func | - |

<Subtitle>Estilo</Subtitle>

> O estilo do botão pode ser alterado através de dois objetos `buttonStyle` e `boxStyle`

<Preview>
  <SwitchButton
    options={[{name: 'Opção 1', value: 1}, {name: 'Opção 2', value: 2}]}
    onChange={() => {}}
    buttonStyle={{
      backgroundColor: 'salmon',
      borderRadius: 40
    }}
    boxStyle={{
      backgroundColor: '#f7cac9',
      borderRadius: 40
    }}
  />
</Preview>


<Subtitle>Variações</Subtitle>

> O número de botões é limitado apenas pela quantidade de itens no array de opções.

<Preview>
  <SwitchButton
    options={[
      {name: 'Opção 1', value: 1},
      {name: 'Opção 2', value: 2},
      {name: 'Opção 3', value: 3},
      {name: 'Opção 4', value: 4},
    ]}
    onChange={() => {}}
  />
</Preview>

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<SwitchButton options={options} onChange={handleChange} />
```