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

export const exampleKeyDates = {
  type: 'keydates',
  url: '#',
  title: 'Key dates link',
  keyDates: [
    {
      title: 'June 13th, 2023 and beyond',
      subtitle: 'Key Dates Card',
      content: 'Key Dates Card Summary'
    },
    {
      title: 'Another key date is Feb 21st',
      subtitle: 'Key Dates Card 2',
      content: 'Key Dates Card Summary 2'
    }
  ]
}

export const examplePromo = [
  {
    type: 'promo',
    title: 'Example title',
    meta: {
      topic: 'Environment'
    },
    url: '#',
    summary: 'Labore mollit labore tempor quis ex fugiat eu proident aliqua ipsum duis, fugiat eu proident aliqua.'
  },
  {
    type: 'promo',
    title: 'Another title',
    meta: {
      topic: 'Health',
      dateStart: '2019-01-01T09:00:00.000+10:00',
      dateEnd: '2020-12-01T09:00:00.000+10:00',
    },
    url: '#',
    image: { src: svgPlaceholder({ width: 400, height: 300, bgColor: '#4b4352', fgColor: '#efeef0' }) },
    summary: 'Elit adipisicing velit exercitation fugiat ex incididunt ullamco magna cupidatat dolore eiusmod sit amet.'
  },
  {
    type: 'promo',
    title: 'A great title',
    meta: {
      topic: 'Community',
      date: '2020-12-01T09:00:00.000+10:00'
    },
    url: '#',
    summary: 'Consequat deserunt fugiat eu proident velit exercitation fugiat ex aliqua ipsumnisi dolore id eata quest.'
  }
]

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

<Meta
  title='Core/Containers/Card carousel'
  component={RplCardCarousel}
/>

# Card carousel

<ArgsTable of={RplCardCarousel} />

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
    args={{
      perView: 1,
      items: examplePromo
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

# Card carousel with Breakpoints

<ArgsTable of={RplCardCarousel} />

<Canvas>
  <Story
    name='Breakpoints'
    play={a11yStoryCheck}
    args={{
      perView: { xs: 1, m: 2, l: 3 },
      items: [...examplePromo, exampleKeyDates, ...examplePromo]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

# Scroll on mobile

<ArgsTable of={RplCardCarousel} />

<Canvas>
  <Story
    name='Scroll on mobile'
    play={a11yStoryCheck}
    args={{
      perView: { xs: 1, m: 2 },
      items: examplePromo.slice(0, 2)
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

# Card carousel with single card

<ArgsTable of={RplCardCarousel} />

<Canvas>
  <Story
    name='Single Card'
    play={a11yStoryCheck}
    args={{
      items: [examplePromo[0]]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
