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

import { TextEditor } from '../';
import { SimpleTextEditor } from './text-editor.stories.js';

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

<Title>Text Editor</Title>

<Description>
  Editor de texto dos aplicativos Eureca. Pequena customização da biblioteca [CKEditor](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html), 
  aceita todas as props da biblioteca original.
</Description>

<Preview>
  <Story name="Basic Text Editor">
    <SimpleTextEditor />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| data | Dados de entrada do editor, se existirem <br /> 'string' \| 'node' | '' |
| onChange | Função de retorno do editor. Recebe: **event**, **data** e **plainText** <br /> 'func' | () => { } |
| onBlur | Função disparada no onBlur do editor <br /> Recebe todos os valores do **editor** 'func' | () => { } |
| onFocus | Função disparada no onFocus do editor <br /> Recebe todos os valores do **editor** 'func' | () => { } |
| className | className para edição do CSS do editor se necessário <br /> 'string' | '' |
| props | Todas as props padrão do CKEditor <br /> | - |

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

> onChange retorna: `event`, `data` e `plainText`.

> onBlur retorna: `editor`.

> onFocus retorna: `editor`.

```jsx
<TextEditor
  data='Texto inicial do editor, se existir'
  onChange={handleChange}
  onBlur={handleBlur}
  onFocus={handleFocus}
/>
```