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 { Slider } from '../';
import { SimpleSlider, TwoValuesSlider } from './slider.stories.js';

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

<Title>Slider</Title>

<Description>
  Slider 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/slider/#slider) e tem estilo definido pelo tema desta biblioteca.
</Description>

<Preview>
  <Story name="Simple Slider">
    <SimpleSlider />
  </Story>
  <Story name="Two Values Slider">
    <TwoValuesSlider />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| value | Valor do radio <br /> number \| [number] | - |
| marks | Ativa ou desativas as marcações <br /> bool | true |
| onChange | Função de onChange do radio <br /> func | - |

<Subtitle>Variações</Subtitle>

> Se for passado para `values` um array de dois valores o slider possuirá valores mínimos e máximos

<Preview>
  <ThemeProvider theme={MuiTheme}>
    <Flex justifySpaceAround>
      <Slider value={5} max={10} onChange={() => {}} color='primary' />
      <Slider value={[3, 7]} max={10} onChange={() => {}} color='secondary' />
    </Flex>
  </ThemeProvider>
</Preview>

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

```jsx
<Slider value={5} max={10} onChange={() => {}} />
```