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

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

<Meta
  title='Core/Containers/Image'
  component={RplImage}
  argTypes={{
    height: {
      control: { type: 'number' }
    },
    width: {
      control: { type: 'number' }
    },
    srcSet: {
      control: { type: 'text' }
    },
    sizes: {
      control: { type: 'text' }
    },
    fit: {
      type: 'select',
      options: RplImageFit
    },
    priority: {
      type: 'select',
      options: RplImagePriority
    }
  }}
/>

# Responsive image

<ArgsTable of={RplImage} />

<Canvas>
  <Story
    name='Image'
    args={{
      src: '/img/image-landscape-m.jpg'
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Circle'
    args={{
      src: '/img/image-landscape-s.jpg',
      height: 200,
      width: 200,
      circle: true,
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Square 1/1'
    args={{
      src: '/img/image-landscape-m.jpg',
      height: 500,
      width: 600,
      aspect: 'square'
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Full 4/3'
    args={{
      src: '/img/image-landscape-m.jpg',
      height: 500,
      width: 600,
      aspect: 'full'
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Wide 16/9'
    args={{
      src: '/img/image-landscape-m.jpg',
      height: 500,
      width: 600,
      aspect: 'wide'
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Ultrawide 21/9'
    args={{
      src: '/img/image-landscape-m.jpg',
      height: 500,
      width: 600,
      aspect: 'ultrawide'
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Panorama 3/1'
    args={{
      src: '/img/image-landscape-m.jpg',
      height: 500,
      width: 600,
      aspect: 'panorama'
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Lazy loading'
    args={{
      src: '/img/image-landscape-m.jpg',
      height: 500,
      width: 600,
      priority: 'low'
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Responsive ratios'
    args={{
      src: '/img/image-landscape-m.jpg',
      height: 500,
      width: 600,
      aspect: { xs: 'square', s: 'full', m: 'wide', l: 'ultrawide', xl: 'panorama' },
      priority: 'high'
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Focal position'
    args={{
      src: '/img/image-landscape-l.jpg',
      height: 1920,
      width: 2880,
      focalPoint: {
        x: 2620,
        y: 620
      },
      aspect: { xs: 'square', s: 'full', m: 'wide', l: 'ultrawide', xl: 'panorama' },
      priority: 'high'
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Image fit'
    args={{
      src: '/img/image-landscape-m.jpg',
      height: 800,
      width: 800,
      fit: 'contain'
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Source sets'
    args={{
      src: '/img/image-landscape-s.jpg',
      srcSet: '/img/image-landscape-s.jpg 640w, /img/image-landscape-m.jpg 960w , /img/image-landscape-l.jpg 1240w',
      sizes: '(min-width: 640px) 640px, (min-width: 960px) 960px, (min-width: 1240px) 1240px'
    }}
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
