import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, number, text, select } from '@storybook/addon-knobs'
import ScrollableContainer from './ScrollableContainer'
import {
  ScrollableContainerUI,
  HeaderUI,
  FooterUI,
  BodyUI,
  SimpleBarExample,
} from './ScrollableContainer.storiesHelpers'
import Button from '../Button'

<Meta
  title="Components/Structural/ScrollableContainer"
  component={ScrollableContainer}
/>

# ScrollableContainer

This component is a ready to use container for when you need a layout when the main content scrolls and you have either a fixed element at the top or at the bottom or both. It provides styles needed and the shadow effects, all you need to provide is the content for each section.

> The container supports being a child of a css grid, if you want it to fill an entire cell make both height and width 100%

<Canvas>
  <Story name="default">
    <div
      style={{
        background: '#005CA4',
        minHeight: '500px',
        padding: '50px',
      }}
    >
      <ScrollableContainerUI
        header={
          <HeaderUI className="TESTING" data-testprop="This gets passed">
            <h1>Heading</h1>
          </HeaderUI>
        }
        body={
          <BodyUI>
            <p>
              Ullamco reprehenderit in irure officia dolore anim eiusmod labore
              duis ea laborum ex. Reprehenderit consequat officia ea id ex
              exercitation et sit et. Velit velit aliqua occaecat quis occaecat.
              Enim incididunt est velit pariatur adipisicing labore dolore anim
              cillum.
            </p>
            <p>
              Ullamco reprehenderit in irure officia dolore anim eiusmod labore
              duis ea laborum ex. Reprehenderit consequat officia ea id ex
              exercitation et sit et. Velit velit aliqua occaecat quis occaecat.
              Enim incididunt est velit pariatur adipisicing labore dolore anim
              cillum.
            </p>
            <p>
              Ullamco reprehenderit in irure officia dolore anim eiusmod labore
              duis ea laborum ex. Reprehenderit consequat officia ea id ex
              exercitation et sit et. Velit velit aliqua occaecat quis occaecat.
              Enim incididunt est velit pariatur adipisicing labore dolore anim
              cillum.
            </p>
            <p>
              Ullamco reprehenderit in irure officia dolore anim eiusmod labore
              duis ea laborum ex. Reprehenderit consequat officia ea id ex
              exercitation et sit et. Velit velit aliqua occaecat quis occaecat.
              Enim incididunt est velit pariatur adipisicing labore dolore anim
              cillum.
            </p>
            <p>
              Ullamco reprehenderit in irure officia dolore anim eiusmod labore
              duis ea laborum ex. Reprehenderit consequat officia ea id ex
              exercitation et sit et. Velit velit aliqua occaecat quis occaecat.
              Enim incididunt est velit pariatur adipisicing labore dolore anim
              cillum.
            </p>
            <p>
              Ullamco reprehenderit in irure officia dolore anim eiusmod labore
              duis ea laborum ex. Reprehenderit consequat officia ea id ex
              exercitation et sit et. Velit velit aliqua occaecat quis occaecat.
              Enim incididunt est velit pariatur adipisicing labore dolore anim
              cillum.
            </p>
          </BodyUI>
        }
        footer={
          <FooterUI>
            <Button theme="blue">Action!</Button>
          </FooterUI>
        }
      />
    </div>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: HS App UI

<br />
<br />

### Props

<ArgsTable of={ScrollableContainer} />

## Usage with 'simplebar-react'

Since we sometimes use [this library](https://github.com/Grsmto/simplebar/tree/master/packages/simplebar-react) it made sense to add support for it, all you need is to turn the `withSimpleBar` to `true`, the component will set it up for you.

## Nesting

You can nest containers, see the "full example" story below with a ScrollableContainer in the footer of another.

## Interactive header and footer

If you need to do something special when either the header or footer are "scrolled", use the `onScrollableSectionsStateChange` callback, which will give access to those sections scrolled state and fire when those change:

```jsx
const [isTopScrolled, setIsTopScrolled] = useState(null)

<ScrollableContainerUI
    onScrollableSectionsStateChange={({ isTopScrolled, isBottomScrolled }) => {
      setIsTopScrolled(isTopScrolled)
    }}
    header={
      <HeaderUI
        className={isTopScrolled ? 'small' : 'big'}
      >
        <h1>Heading</h1>
      </HeaderUI>
    }
    //...
/>
```

<Canvas>
  <Story name="full example">
    <SimpleBarExample />
  </Story>
</Canvas>
