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 { DrawerMenu } from '../';
import { BasicDrawer } from './drawer.stories.js';

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

<Title>Drawer Menu</Title>

<Description>
  Drawer menu dos aplicativos Eureca.
</Description>

<Preview>
  <Story name="Basic Drawer Menu">
    <BasicDrawer />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| list | Json com os itens a serem exibidos no menu <br /> object | {} |
| current | Id do item atualmente selecionado <br /> string | '' |
| isOpen | Variável que determina se o drawer está aberto ou não <br /> bool | false |
| user | Objeto do usuário a ser passado para o menu <br /> object \| object | null |
| linkComponent | Componente de link a ser usado em cada item do menu, como por exemplo o Link do NextJs <br /> object \| object | null |
| onCLose | Função chamada ao se fechar o drawer <br /> func | - |
| onLogout | Função disparada ao se clicar em logout <br /> func | - |
| onClickItem | Função disparada ao  se clicar em um item. Retorna uma string com item e subitem (se houver) com um '.' de separação. Ex: "oportunidades.edicao" <br /> func | - |
| onClickUser | Função disparada ao  se clicar no usuário. Retorna o objeto do usuário <br /> func | - |
| windowSize | Tamanho da tela passado ao drawer. Deve ser um objeto com as chaves width e height e medidas em pixels. <br /> object | - |

<Subtitle>Formato de dados do usuário</Subtitle>

```jsx
{
  id: 3,
  name: 'Usuário Eureca',
  avatar: Logo,
}
```

<Subtitle>Formato do JSON de Itens</Subtitle>

> O arquivo de itens é um JSON com chaves 'top' para os itens superiores
e 'bottom' para os itens inferiores, logo acima do usuário.

```jsx
import React from 'react';

import { FiUsers, FiBriefcase, FiBox } from 'react-icons/fi';
import { BsTable, BsQuestionCircle } from 'react-icons/bs';

export default {
  top: [
    {
      id: 'opportunities',
      icon: <BsTable />,
      text: 'Oportunidades',
      href: '/oportunidades',
      subCategories: [
        { text: 'Edição', id: 'edit', href: '/oportunidades/edicao' },
        {
          text: 'Gestão do Candidato',
          id: 'user-management',
          href: '/oportunidades/gestao-do-candidato',
        },
        { text: 'Avaliação', id: 'evaluation', href: '/oportunidades/avaliacao' },
        { text: 'Estatísticas', id: 'stats', href: '/oportunidades/estatisticas' },
      ],
    },
    {
      id: 'candidates',
      icon: <FiUsers />,
      text: 'Candidatos',
      href: '/candidatos',
      subCategories: [],
    },
    {
      id: 'clients',
      icon: <FiBriefcase />,
      text: 'Clientes',
      href: '/clientes',
      subCategories: [
        { text: 'Edição', id: 'edit', href: '/clientes/edicao' },
        {
          text: 'Gestão das Oportunidades',
          id: 'opportunity-management',
          href: '/clientes/gestao-de-oportunidades',
        },
        { text: 'Fit Cultural', id: 'fit-cultural', href: '/clientes/fit-cultural' },
        { text: 'Estatísticas', id: 'stats', href: '/clientes/estatisticas' },
      ],
    },
    {
      id: 'partners',
      icon: <FiBox />,
      text: 'Parceiros',
      href: '/parceiros',
      subCategories: [],
    },
  ],

  bottom: [
    {
      id: 'help',
      icon: <BsQuestionCircle />,
      text: 'Suporte',
      href: '/suporte',
      subCategories: [],
    },
  ],
};
```

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

```jsx
<DrawerMenu
  list={AdminList}
  isOpen={isOpen}
  current={current}
  user={user}
  onClickItem={item => console.log('Item Clicked: ', item)}
  onClose={() => setIsOpen(!isOpen)}
  onLogout={() => console.log('Logout Clicked')}
  onClickUser={user => console.log('User Clicked', user)}
  linkComponent={Link}
  windowSize={{ width: 1920, height: 1080}}
/>
```