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 { Button } from '../';
import { BasicButton } from './button.stories.js';

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

<Title>Botão</Title>

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

<Preview>
  <Story name="Basic Button">
    <BasicButton />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| variant | Variante de estilo do botão <br /> 'contained' \| 'outlined' \| 'text' | 'contained' |

<Subtitle>Variações</Subtitle>

<Preview>
  <ThemeProvider theme={MuiTheme}>
    <Flex directionRow justifySpaceAround>
      <Button variant='contained'>Button</Button>
      <Button variant='outlined'>Button</Button>
      <Button variant='text'>Button</Button>
    </Flex>
  </ThemeProvider>
</Preview>

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

```jsx
  <Button variant='contained'>Button</Button>
```