import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';
import { Box } from '@material-ui/core';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
import { ptBR } from 'date-fns/locale';

import { DatePicker } from '../';
import { DatePickerStory } from './date-picker.stories.js';

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

<Title>Date Picker</Title>

<Description>
  Date picker básico dos aplicativos Eureca, extendido do date picker padrão do `Material-UI Pickers`.
</Description>
<Description>
  Contém todas as props definidas no [Material-UI Pickers](https://material-ui-pickers.dev/) e tem estilo definido pelo tema desta biblioteca.
</Description>

<Preview>
  <Story name="Date Picker">
    <DatePickerStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| inputVariant | Variante de estilo do input <br /> 'standard' \| 'outlined' \| 'filled' | 'outlined' |
| autoOk | Controla o fechamento automático do picker ao se escolher uma data <br /> bool | 'true' |
| format | Formato de data utilizado <br /> string | 'dd/MM/yyyy' |
| okLabel | Label do botão de confirmação <br /> string | 'Ok' |
| cancelLabel | Label do botão de cancelamento <br /> string | 'Cancelar' |
| clearLabel | Label do botão que reseta a data <br /> string | 'Limpar' |
| todayLabel | Label do botão que escolhe a data atual <br /> string | 'Hoje' |
| invalidDateMessage | Mensagem de data inválida <br /> string | 'Data inválida' |
| helperText | Texto localizado na parte inferior do input do Material-UI <br /> string | - |
| error | Variável que controla estado de erro do componente <br /> bool | - |

<Subtitle>Providers</Subtitle>

O `DatePicker` deve ser usado em conjunto com o provider `MuiPickersUtilsProvider`.
É necessário passar o utils de uma biblioteca de manipulação de datas escolhida além
do locale da biblioteca de tempo sendo utilizada.

O provider deve ser adicionado ao root do app.
No caso do Next.JS podem ser incluídos no _app.js.

No exemplo abaixo podemos ver seu uso com o utils do DateFn, importado de `@date-io/date-fns`, e a localização de português do Brasil.

```jsx
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBR}>
  <DatePicker {...props}/>
</MuiPickersUtilsProvider>
```

No exemplo abaixo podemos ver seu uso com o utils do Moment, importado de `@date-io/moment`, e a localização inglês .

```jsx
<MuiPickersUtilsProvider utils={MomentUtils} locale={en}>
  <DatePicker {...props}/>
</MuiPickersUtilsProvider>
```

<Subtitle>Variações</Subtitle>

<Preview>
  <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBR}>
    <DatePicker inputVariant='standard'/>
    <Box my={3}>
      <DatePicker inputVariant='outlined'/>
    </Box>
    <DatePicker inputVariant='filled'/>
  </MuiPickersUtilsProvider>
</Preview>

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

> A função `onChange` retorna a nova data escolhida

```jsx
<DatePicker
  name="component-name"
  label={label}
  value={date}
  onChange={handleChange}
/>
```