import { html } from 'lit';
import { Story, Meta, Canvas } from '@storybook/addon-docs';
import './scroll.component.ts';
import {
  defaultDesktopImages,
  defaultMobileImages,
  defaultDataSlots,
} from '../constants/scroll.variant.ts';

<Meta title="Accelerators/Scroll Component" />

# Scroll Component

The Scroll component is an accelerator that allows user to pass images for desktop and mobile to show animated effect on scrolling the component with changing images. It also supports slots for custom Elements to appear on screen while scrolling

# Props

| Prop Name     | Type       | Description                                                              |
| ------------- | ---------- | ------------------------------------------------------------------------ |
| desktopImages | Object     | The object having key value pair of image name and it's path for desktop |
| mobileImages  | boolean    | The object having key value pair of image name and it's path for mobile  |
| dataSlot      | slotRecord | Slot provided to the user to insert custom elements                      |

The slot record has the following key value pairs:

| Key       | Type   | Description                                                                                  |
| --------- | ------ | -------------------------------------------------------------------------------------------- |
| slotName  | string | The name of the slot which will be replaced by the custom element                            |
| dataStart | number | From which image number, the custom element should start coming up on screen while scrolling |
| dataEnd   | number | From which image number, the custom element should go off the screen while scrolling         |

# Examples

Basic scroll component without `props`

export const TemplateDefault = () => html`<ymlwebcl-scroll> </ymlwebcl-scroll>`;

<Canvas columns={1}>
  <Story name="default">{TemplateDefault.bind({})}</Story>
</Canvas>

Basic scroll component with `slots` and `props`

export const TemplateWithSlots = (args) =>
  html`<ymlwebcl-scroll .dataSlot=${args.dataSlot}>
    <h1 slot="slot_1">WATER BOTTLE</h1>
    <h1 slot="slot_2">AIR PURIFIER</h1>
  </ymlwebcl-scroll>`;

<Canvas columns={1}>
  <Story
    name="withSlots"
    args={{
      dataSlot: [
        {
          dataStart: 1,
          dataEnd: 2,
          slotName: 'slot_1',
        },
        {
          dataStart: 3,
          dataEnd: 5,
          slotName: 'slot_2',
        },
      ],
    }}
  >
    {TemplateWithSlots.bind({})}
  </Story>
</Canvas>

Basic scroll component with `slots` and `props`

export const TemplateWithImages = (args) =>
  html`<ymlwebcl-scroll
    .dataSlot=${args.dataSlot}
    .desktopImages=${args.desktopImages}
    .mobileImages=${args.mobileImages}
  >
    <h1 slot="slot_1">WATER BOTTLE</h1>
  </ymlwebcl-scroll>`;

<Canvas columns={1}>
  <Story
    name="withImages"
    args={{
      dataSlot: defaultDataSlots,
      desktopImages: defaultDesktopImages,
      mobileImages: defaultMobileImages,
    }}
  >
    {TemplateWithImages.bind({})}
  </Story>
</Canvas>