import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import ReactCarouselQuery from '../'

<Meta title="Docs/1 - Basic Example" component={ReactCarouselQuery} />

# Basic example

<Canvas>
  <Story name="Basic">
    {(args) => {
      const getUrl = (offset, limit) => {
        const BASE_URL = 'https://gateway.marvel.com/v1/public/characters?'
        const apikey = process.env.MARVEL_API_KEY
        const params = `&offset=${offset}&limit=${limit}`
        return `${BASE_URL}${apikey}${params}`
      }
      const formatData = response => {
        const { offset, total, results } = response
        return {
          offset,
          total,
          items: results,
        }
      }
      const getData = async ({ offset, limit }) => {
        const url = getUrl(offset, limit)
        const { data } = await (await fetch(url)).json()
        return formatData(data)
      }
      const renderItem = ({ item }) => {
        const imgSrc = `${item.thumbnail.path}.${item.thumbnail.extension}`
        return (
          <div style={{ height: '100%' }}>
            <img
              draggable={false}
              alt={item.name}
              style={{
                display: 'block',
                objectFit: 'cover',
                height: '80%',
                width: '100%',
                background: '#ffffff url("/assets/iconLoading.svg") no-repeat center',
              }}
              src={imgSrc}
            />
            <div style={{ height: '20%', backgroundColor: 'white', color: '#151515' }}>
              <h3>{item.name}</h3>
              <p className="line-clamp">{item.description || 'Description not available'}</p>
            </div>
          </div>
        )
      }
      return <ReactCarouselQuery renderItem={renderItem} getData={getData} />
    }}
   </Story>
</Canvas>


### How to use

```jsx
<ReactCarouselQuery
  renderItem={({ name, description, imgSrc }) => (
    <div style={{ height: '100%' }}>
      <img
        src={imgSrc}
        draggable={false}
        alt={name}
        style={{
          display: 'block',
          objectFit: 'cover',
          height: '80%',
          width: '100%',
          background: '#ffffff url("/assets/iconLoading.svg") no-repeat center',
        }}
      />
      <div style={{ height: '20%', backgroundColor: 'white', color: '#151515' }}>
        <h3>{name}</h3>
          <p className="line-clamp">{description || 'Description not available'}</p>
      </div>
    </div>
  )}
  getData={async ({ currentOffset, limit }) => {
    const { data: { offset, total, items } } = await (await fetch('http://someApi.com')).json()
    return { offset, total, items }
  }}
/>
```


### The mandatory props

- renderItem: Render each slide as you wish!
- getData: This should be an async function that returns the items info like the pictures sources to be fetched.
Should respect the following format: `{ offset: number; total: number; items: { id }[] }`