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 { Radio } from '../';
import { RadioComponent } from './radio.stories.js';

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

<Title>Radio</Title>

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

<Preview>
  <Story name="Basic Radio">
    <RadioComponent />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| checked | Controle de estado do radio <br /> bool | 'false' |
| value | Valor do radio <br /> any | - |
| name | Nome dado ao radio <br /> string | - |
| label | Conteúdo da label <br /> string \| node | - |
| color | Opção de cor <br /> 'default' \| 'primary' \| 'secondary' | 'primary' |
| onChange | Função de onChange do radio <br /> func | - |
| props | Todas as props aceitas pelo chip do Material-UI <br /> | - |

<Subtitle>Cores</Subtitle>

>default | primary | secondary

<Preview>
  <ThemeProvider theme={MuiTheme}>
    <Flex directionRow justifySpaceAround>
      <Radio
        label='Label'
        value={1}
        name='radio-component'
        onChange={() => {}}
        checked
        color='default'
      />
      <Radio
        label='Label'
        value={2}
        name='radio-component'
        onChange={() => {}}
        checked
        color='primary'
      />
      <Radio
        label='Label'
        value={3}
        name='radio-component'
        onChange={() => {}}
        checked
        color='secondary'
      />
    </Flex>
  </ThemeProvider>
</Preview>

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

> Os radio buttons devem estar envolvidos por um `RadioGroup` do [Material-UI](https://material-ui.com/components/radio-buttons/#radiogroup) para controle

```jsx
<RadioGroup
  aria-label="test"
  name="test-group"
  value={value}
  onChange={handleChange}
>
  <Radio
    name="option-1"
    label='Option 1'
    value="1"
    disabled={isDisabled}
    onChange={handleChange}
  />
  <Radio
    name="option-2"
    label='Option 2'
    value="2"
    disabled={isDisabled}
    onChange={handleChange}
  />
</RadioGroup>
```