import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';
import { Box, ThemeProvider, Typography } from '@material-ui/core';

import MuiTheme from '../../../theme/mui';

import { Flex } from '../../Flex';
import { Checkbox } from '../';
import { BasicCheckbox } from './checkbox.stories.js';

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

<Title>Checkbox</Title>

<Description>
  Checkbox dos aplicativos Eureca, extendido do checkbox padrão do `Material-UI`.
</Description>
<Description>
  Contém todas as props definidas no [Material-UI](https://material-ui.com/components/checkboxes/#checkbox) e tem estilo definido pelo tema desta biblioteca.
</Description>

<Preview>
  <Story name="Basic Checkbox">
    <BasicCheckbox />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| checked | Controle de estado do checkbox <br /> boolean | 'false' |
| value | Valor do checkbox <br /> any | - |
| name | Nome dado ao checkbox <br /> string | - |
| label | Conteúdo da label <br /> 'string' \| 'node' | - |
| color | Opção de cor <br /> 'default' \| 'primary' \| 'secondary' | 'default' |
| onChange | Função de onChange do checkbox <br /> func | - |

<Subtitle>Cores</Subtitle>

>default | primary | secondary

<Preview>
  <ThemeProvider theme={MuiTheme}>
    <Flex directionRow justifySpaceAround>
      <Checkbox
        label='Checkbox'
        name='checkbox-component'
        onChange={() => {}}
        value={{}}
        checked
        color='default'
      />
      <Checkbox
        label='Checkbox'
        name='checkbox-component'
        onChange={() => {}}
        value={{}}
        checked
        color='primary'
      />
      <Checkbox
        label='Checkbox'
        name='checkbox-component'
        onChange={() => {}}
        value={{}}
        checked
        color='secondary'
      />
    </Flex>
  </ThemeProvider>
</Preview>

<Subtitle>Variações</Subtitle>

> default | disabled | indeterminate

<Preview>
  <ThemeProvider theme={MuiTheme}>
    <Flex directionRow justifySpaceBetween>
      <Checkbox
        label='Checkbox'
        name='checkbox-component'
        onChange={() => {}}
        value={{}}
        checked
      />
      <Checkbox
        label='Checkbox'
        name='checkbox-component'
        onChange={() => {}}
        value={{}}
        checked
        disabled
      />
      <Checkbox
        label='Checkbox'
        name='checkbox-component'
        onChange={() => {}}
        value={{}}
        checked
        indeterminate
      />
    </Flex>
  </ThemeProvider>
</Preview>

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

```jsx
<Checkbox
  label='Checkbox'
  name='checkbox-component'
  value={value}
  checked={checked}
  dissabled={isDisabled}
  onChange={handleChange}
/>
```