import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
} 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 { BottomFab } from '../';
import { FabPlus } from './bottom-fab.stories.js';

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

<Title>Bottom FAB</Title>

<Description>
  Botão circular, extendido do Floating Action Button (FAB) do `Material-UI`.
</Description>
<Description>
  Contém todas as props definidas no [Material-UI](https://material-ui.com/pt/components/floating-action-button/) e tem estilo definido pelo tema desta biblioteca.
</Description>

<Preview>
  <Story name="Bottom Fab">
    <div style={{ height: 60 }}>
    <FabPlus />
    </div>
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| options | Array de opções do menu interno com objetos no pradrão abaixo <br /> [ { id: (number or string), icon: array, label: string } ] | - |
| onClick | Função de onClick dos items do menu, recebe de volta um value <br /> func | - |
| styleProps | Objeto com estilos adicionais se necessário override <br /> object | - |

<Subtitle>Funcionalidade</Subtitle>

Ao se clicar no botão um menu é aberto contendo as opções passadas no array
de objetos da prop `options`. O formato desses objetos está acima na tabela
de props.

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

```jsx
<BottomFab options={menuOptionsArray} onClick={handleClick} />
```