import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplMediaGallery from './RplMediaGallery.vue'
import { a11yStoryCheck } from './../../../stories/interactions.js'

export const SingleTemplate = (args) => ({
  components: { RplMediaGallery },
  setup() {
    return { args }
  },
  template: '<RplMediaGallery v-bind="args" />'
})

<Meta
  title='Core/Containers/Media gallery'
  component={RplMediaGallery}
/>

# Media gallery

<ArgsTable of={RplMediaGallery} />

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
    args={{
      items: [{
        title: 'Media title',
        caption: 'Optional media caption content section',
        thumbnail: svgPlaceholder({ width: 1200, height: 800, bgColor: '#ccc', fgColor: '#444' }),
        image: svgPlaceholder({ width: 2400, height: 1440, bgColor: '#ccc', fgColor: '#444' })
      }, {
        title: 'Another media',
        caption: 'Another optional media caption content section, et another optional media caption content section',
        thumbnail: svgPlaceholder({ width: 1200, height: 800, bgColor: '#a0e6fb', fgColor: '#283437' }),
        image: svgPlaceholder({ width: 1440, height: 2400, bgColor: '#a0e6fb', fgColor: '#283437' })
      }, {
        title: 'And another title',
        caption: 'Yet another optional media caption content section',
        thumbnail: svgPlaceholder({ width: 1200, height: 800, bgColor: '#ecd9ff', fgColor: '#2e2537' }),
        image: svgPlaceholder({ width: 2400, height: 1440, bgColor: '#ecd9ff', fgColor: '#2e2537' })
      }]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

# Media gallery with one item

<Canvas>
  <Story
    name='Single item'
    play={a11yStoryCheck}
    args={{
      items: [{
        title: 'Media title',
        caption: 'Optional media caption content section',
        thumbnail: svgPlaceholder({ width: 1200, height: 800, bgColor: '#ccc', fgColor: '#444' }),
        image: svgPlaceholder({ width: 2400, height: 1440, bgColor: '#ccc', fgColor: '#444' })
      }]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
