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

import { Dropzone } from '../';
import { BasicDropzoneStory } from './dropzone.stories.js';

<Meta title='Originals/Dropzone' component={Dropzone} decorators={[withKnobs]}/>

<Title>Dropzone</Title>

<Description>
  Dropzone básico dos aplicativos Eureca. É baseado na biblioteca [react-dropzone](https://react-dropzone.js.org/)
</Description>

<Preview>
  <Story name="Basic Dropzone">
    <BasicDropzoneStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| size | Tamanho máximo do arquivo permitido em bytes <br /> 'number' \| ['node'] | - |
| mimeType | Tipo do arquivo aceito <br /> 'object' | - |
| startFile | Arquivo de imagem inicial <br /> | - |
| handleUploadImage | Retorna objetos URL com os arquivos adicionados <br /> | - |
| fileCallback | Retorna os arquivos adicionados <br /> | - |
| openFileDialog | Booleano que controla externamente a abertuda do dialog de escolha <br /> | - |

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

```jsx
<Dropzone
  handleUploadImage={handleUploadImage}
  fileCallback={fileCallback}
  startFile={''}
  size={300000}
  mimeType="image/*"
/>
```