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

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

export const dataContent = `
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo est eu
  venenatis tincidunt. Sed sit amet magna tortor. Nullam gravida, nibh a
  tincidunt tempor.
</p>
<p>
  Nulla mauris turpis, mollis et fermentum in, tincidunt vitae enim. Aenean
  gravida, mi a pharetra tempor.
</p>
`

<Meta
  title='Core/Containers/Media embed'
  component={RplMediaEmbed}
  argTypes={{
    size: {
      options: ['small', 'medium', 'large'],
      control: { type: 'select' }
    }
  }}
  args={{}}
/>

# Media embed

<ArgsTable of={RplMediaEmbed} />

<Canvas>
  <Story
    name='Image landscape'
    play={a11yStoryCheck}
    args={{
      type: 'image',
      variant: 'landscape',
      size: 'large',
      title: 'Media title',
      src: '/img/image-landscape-m.jpg',
      showTitle: false,
      allowFullscreen: false,
      caption: 'Optional media caption content section',
      sourceCaption: 'Optional media source information content section',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Image portrait'
    play={a11yStoryCheck}
    args={{
      type: 'image',
      variant: 'portrait',
      size: 'large',
      title: 'Media title',
      src: '/img/image-landscape-m.jpg',
      showTitle: false,
      allowFullscreen: false,
      caption: 'Optional media caption content section',
      sourceCaption: 'Optional media source information content section',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Image square'
    play={a11yStoryCheck}
    args={{
      type: 'image',
      variant: 'square',
      size: 'large',
      title: 'Media title',
      src: '/img/image-landscape-m.jpg',
      caption: 'Optional media caption content section',
      sourceCaption: 'Optional media source information content section',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Image avatar'
    play={a11yStoryCheck}
    args={{
      type: 'image',
      variant: 'avatar',
      size: 'large',
      title: 'Media title',
      src: '/img/image-landscape-s.jpg',
      caption: 'Optional media caption content section',
      sourceCaption: 'Optional media source information content section',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Complex image'
    play={a11yStoryCheck}
    args={{
      type: 'image',
      variant: 'complex',
      title: 'Media title',
      src: '/img/image-landscape-l.jpg',
      showTitle: true,
      allowFullscreen: true,
      caption: 'Optional media caption content section',
      sourceCaption: 'Optional media source information content section',
      dataContent: dataContent,
      downloadUrl: '/img/image-landscape-l.jpg'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Video'
    play={a11yStoryCheck}
    args={{
      type: 'video',
      title: 'Media title',
      src: 'https://www.youtube.com/embed/bSlnfyGTiss',
      transcriptUrl: '#',
      caption: 'Optional media caption content section',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
