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

import { Flex } from '../../Flex';

import { Accordion } from '../';
import { BasicAccordion } from './accordion-basic.stories.js';
import { LargeAccordion } from './accordion-large.stories.js';
import { GroupAccordion } from './accordion-group.stories.js';

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

<Title>Accordion</Title>

<Description>
  Accordion dos aplicativos Eureca.
</Description>

<Preview>
  <Story name="Basic Accordion">
    <BasicAccordion />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| title | Título que será exibido no header <br /> 'string' | '' |
| description | Texto que aparece ao lado do título <br /> 'string' | '' |
| iconColor | Cor do ícone exibido quando a prop `big` for `true` <br /> 'string' | null |
| children | Conteúdo que aparecerá dentro do Accordion <br /> 'node' \| 'element' | null |
| big | Controla o tamanho do `Header` <br /> 'boolean' | false |
| isSelected | Ativa o estilo selecionado do header <br /> 'boolean' | false |
| open | Controle externo de abertura do Accordion <br /> 'boolean' | false |
| rightSideText | Texto exibido no canto direito do Accordion <br /> 'string' | '' |
| icon | Ícone opcionalmente exibido no header quando a prop `big` for `true`<br /> 'object' | { } |
| iconColor | Cor do ícone opcional <br /> 'string' | '' |
| onClick | Função de onClick do header do Accordion <br /> 'func' | () => { } |
| isList | Ativa modo lista do Accordion <br /> 'boolean' | false |
| selected | Prop utilizada para ativar o modo lista quando usado no Unordered List <br /> 'boolean' | { } |
| type | Prop utilizada para configurar o título quando for Unordered List <br /> 'string' | '' |

<Subtitle>Variações</Subtitle>

> Accordion pode ter um header com tamanho `big`

<Preview>
  <Flex>
      <LargeAccordion />
  </Flex>
</Preview>

> É possível agrupar vários Accordions em um grupo utilizando 
uma div que estilize os componentes.

<Preview>
  <Flex>
    <GroupAccordion />
  </Flex>
</Preview>


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

> Accordion básico

```jsx
<Accordion title={title} open={open} isDisabled={disabled}>
  <Box p={3}>
    {content}
  </Box>
</Accordion>
```

> Exemplo de componente AccordionGroup usando Styled Components

```jsx
const AccordionGroup = styled.div`
  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow: hidden;
  & > div {
    border-bottom: 1px solid #EBEBEB;
  }
  & > div:last-child {
    border-bottom: 0;
  }
`;
```

> Accordion Group

```jsx
<AccordionGroup>
  {data.map(item => {
    return (
      <Accordion title={item.title} key={item.id}>
        <Box p={3}>
          {content}
        </Box>
      </Accordion>
    );
  })}
</AccordionGroup>
```