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

import { Flex } from '../../Flex';
import { AvatarUpload } from '../';
import { AvatarUploadStory } from './avatar-upload.stories.js';

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

<Title>Avatar Upload</Title>

<Description>
  Avatar Upload dos aplicativos Eureca.
</Description>

<Preview>
  <Story name="Avatar Upload">
    <AvatarUploadStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| src | URL do avatar a ser usado <br />  'string' | placeholder |
| width | Largura mínima da imagem a ser enviada <br /> 'number' | 48 |
| height | Altura mínima da imagem a ser enviada <br /> 'number' | 48 |
| maxSize | Tamanho máximo do arquivo a ser enviado em MB <br /> 'number' | 8 |
| onClick | Função disparada no onClick do avatar <br /> 'func' | () => { } |
| onUpload | Função disparada ao se escolher uma imagem para upload. Retorna a imagem escolhida <br /> 'func' | () => { } |

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

```jsx
<AvatarUpload
  name='user-avatar'
  src='link-do-avatar-aqui'
  size={120}
  color='#000000'
  onClick={handleClick}
  onUpload={handleUpload}
/>
```