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

import MuiTheme from '../../../theme/mui';

import { Flex } from '../../Flex';
import { Switch } from '../';
import { SimpleSwitch } from './switch.stories.js';

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

<Title>Switch</Title>

<Description>
  Switch básico dos aplicativos Eureca, extendido do switch padrão do `Material-UI`.
</Description>
<Description>
  Contém todas as props definidas no [Material-UI](https://material-ui.com/components/switches/#switch) e tem estilo definido pelo tema desta biblioteca.
</Description>

<Preview>
  <Story name="Basic Switch">
    <SimpleSwitch />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| checked | Controle de estado do switch <br /> boolean | 'false' |
| value | Valor do switch <br /> any | - |
| name | Nome dado ao switch <br /> string | - |
| label | Conteúdo da label <br /> 'string' \| 'node' | - |
| color | Opção de cor <br /> 'default' \| 'primary' \| 'secondary' | 'default' |
| onChange | Função de onChange do switch <br /> func | - |

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

```jsx
<Switch
  name="switch-component"
  label='Label'
  value={value}
  checked={checked}
  onChange={() => {}}
/>
```