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 { FileUpload } from '../';
import { FileUploadButton } from './file-upload.stories.js';

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

<Title>File Upload</Title>

<Description>
  Botão para upload de arquivos.
</Description>

<Preview>
  <Story name="File Upload">
    <div style={{ height: 60 }}>
    <FileUploadButton />
    </div>
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| fileType | Tipo de arquivo que será enviado <br /> 'audio' \| 'video' \| 'image' \| '' | '' |
| onChange | Função disparada quando um arquivo é escolhido <br /> func | - |

<Subtitle>Funcionalidade</Subtitle>

Quando clicado, uma janela é aberta para escolha do arquivo a ser enviado.

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

```jsx
  <FileUpload fileType={fileType} onChange={handleChange} />
```