import { Meta, Story, Title, Subtitle, Description, ArgsTable } from '@storybook/addon-docs/blocks';
import MShadowScroll from './index.vue';

<Meta
  title='Components/ShadowScroll'
  component={MShadowScroll}
  argTypes={{
    startColor: { control: { type: 'color' } },
    endColor: { control: { type: 'color' } },
    backgroundColor: { control: { type: 'color' } },
    width: { control: {type: 'text', disable: true} },
    height: { control: {type: 'range', min: 0, max: 1000} }
  }}
/>

export const Template = (args, {argTypes}) => ({
  props: Object.keys(argTypes),
  components: { MShadowScroll },
  template: `
  <div class="container-md p-md-5 p-4 bg-white">
    <div class="row">
      <div
        class="col-md-6">
        <div class="p-5 text-white" :style="{backgroundColor}">
          <m-shadow-scroll
            :vertical-size="verticalSize"
            :horizontal-size="horizontalSize"
            :start-color="startColor"
            :end-color="endColor"
            :style="{width, height: height+'px'}">
            <div
              v-for="item in 40"
              :key="item"
              class="list-item">
              {{ item }} Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
            </div>
          </m-shadow-scroll>
        </div>
      </div>
    </div>
  </div>`
});

<Title />
<Subtitle />
<Description />

<Story
  name='Vertical'
  args={{
    verticalSize: '10rem',
    startColor: '#ffda00ff',
    endColor: '#ffda0000',
    backgroundColor: '#ffda00',
    width: 'auto',
    height: 500
  }}
  parameters={{
    storysource: { disabled: true }
  }}>
  {Template.bind({})}
</Story>

<ArgsTable story="Vertical" />

## Usage

1.- Import the component

```javascript
import { MShadowScroll } from '@modyo/financial-commons';
```

2.- Register the component locally or globally

```javascript
{
  ...

  components: {
    MShadowScroll
  },

  ...
}
```

3.- Write your component implementation

```html
<m-shadow-scroll style="height:500px">
  <span>Content</span>
</m-shadow-scroll>
```

<div class="alert alert-info">
  <strong>Note:</strong> The scroll shadow needs a fixed height or width to show the shadows as it needs to have an internal scroll setup by a fixed size.
</div>