import { action } from '@storybook/addon-actions'
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { SECTIONS } from '../../../_utils/taxonomy'
import { ItemRadio } from '../../../itemRadio'
import { ItemRadioGroup } from '../../../itemRadioGroup'
import { TheVoice } from '../../../theVoice'
import { Content, MainContent } from '../../content'
import { SlideSection } from './index'

<Meta title={`${SECTIONS}/SlideSection`} />

# SlideSection

<Canvas>
  <Story name="Default">
    <MainContent>
      <Content>
        <SlideSection
          media={<div style={{ backgroundColor: '#DDD', height: 'calc(100vh - 90px)' }} />}
          reducedContent={<TheVoice>What is your return route?</TheVoice>}
          onPositionChange={action('PositionChange')}
        >
          {(setDefaultPosition, setReducedPosition) => (
            <ItemRadioGroup onChange={setReducedPosition}>
              <ItemRadio labelTitle="Via A10" label="Tolls" name="foo" value="1" />
              <ItemRadio labelTitle="Via N200" label="No tolls" name="foo" value="2" />
            </ItemRadioGroup>
          )}
        </SlideSection>
      </Content>
    </MainContent>
  </Story>
  <Story name="With many routes">
    <MainContent>
      <Content>
        <SlideSection
          media={<div style={{ backgroundColor: '#DDD', height: 'calc(100vh - 90px)' }} />}
          reducedContent={<TheVoice>What is your route?</TheVoice>}
          onPositionChange={action('PositionChange')}
        >
          {(setDefaultPosition, setReducedPosition) => (
            <ItemRadioGroup onChange={setReducedPosition}>
              <ItemRadio labelTitle="Via A10" label="Tolls" name="foo" value="1" />
              <ItemRadio labelTitle="Via N200" label="No tolls" name="foo" value="2" />
              <ItemRadio labelTitle="Via A10" label="Tolls" name="foo" value="3" />
              <ItemRadio labelTitle="Via N200" label="No tolls" name="foo" value="4" />
              <ItemRadio labelTitle="Via A10" label="Tolls" name="foo" value="5" />
              <ItemRadio labelTitle="Via N200" label="No tolls" name="foo" value="6" />
            </ItemRadioGroup>
          )}
        </SlideSection>
      </Content>
    </MainContent>
  </Story>
</Canvas>

## Specifications

Use it to make that part of the screen change size and position based on hand gestures.

```jsx
import { SlideSection } from '@blablacar/ui-library/build/grip'
<SlideSection
  media={/* another component, usually a map */}
>
  {(setDefaultPosition, setReducedPosition, setExpandedPosition) => (
    <ItemRadioGroup>
      <ItemRadio labelTitle="Via A10" label="Tolls" name="foo" value="1" />
      <ItemRadio labelTitle="Via N200" label="No tolls" name="foo" value="2" />
    </ItemRadioGroup>
  )}
</SlideSection>
```

<ArgsTable of={SlideSection} />