import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplPrimaryCampaign from './RplPrimaryCampaign.vue'
import RplContent from '../content/RplContent.vue'
import { a11yStoryCheck } from './../../../stories/interactions.js'
import { bpMin } from '../../lib/breakpoints'

export const SingleTemplate = (args) => ({
  components: { RplPrimaryCampaign, RplContent },
  setup() {
    return { args }
  },
  template: `
    <RplPrimaryCampaign v-bind="args">
      <RplContent html="${args.default}" />
    </RplPrimaryCampaign>
  `
})

export const MetaTemplate = (args) => ({
  components: { RplPrimaryCampaign, RplContent },
  setup() {
    return { args }
  },
  template: `
    <RplPrimaryCampaign v-bind="args">
      <RplContent html="${args.default}" />
      <template #meta>
        ${args.meta}
      </template>
    </RplPrimaryCampaign>
  `
})

<Meta
  title='Core/Navigation/Campaign banner'
  component={RplPrimaryCampaign}
  parameters={{
    layout: 'fullscreen',
    chromatic: {
      viewports: [bpMin.s, bpMin.l]
    }
  }}
  args={{
    title: 'Primary campaign banner title',
    default: '<p>In do dolore dolore sint ipsum est est, commodo ex laborum Lorem ut deserunt dolore ullamco.</p>',
    link: { text: 'Campaign link', url: '#' },
  }}
/>

# Campaign banner

<ArgsTable of={RplPrimaryCampaign} />

<Canvas>
  <Story
    name='Primary'
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Example / With Image

This is an example the primary campaign banner with optional image

<Canvas>
  <Story
    name='Primary/Image'
    play={a11yStoryCheck}
    args={{
      image: {
        src: '/img/image-landscape-m.jpg',
      },
      meta: '<span>Some metadata, probably about the image</span>',
    }}
  >
    {MetaTemplate.bind()}
  </Story>
</Canvas>
