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

export const SingleTemplate = (args) => ({
  components: { RplCallToAction },
  setup() {
    const img = { src: svgPlaceholder({ width: 1200, height: 800, bgColor: '#ccc', fgColor: '#444' }) }
    return { args, img }
  },
  template: `
  <ul class="rpl-storybook__page rpl-grid">
    <RplCallToAction
      v-for="(item, index) of args.number"
      :key="index"
      el="li"
      v-bind="args"
      class="rpl-col-12"
      :image="img"
    >
      <template #meta>
        ${args.meta}
      </template>
      ${args.default}
    </RplCallToAction>
  </ul>
  `
})

<Meta
  title='Core/Navigation/Card'
  component={RplCallToAction}
  argTypes={{
    number: {
      control: { type: 'select' },
      options: [1, 2, 4, 8]
    },
    title: {
      control: 'text'
    },
    url: {
      control: 'text'
    },
    el: {
      table: {
        disable: true
      }
    },
    variant: {
      table: {
        disable: true
      }
    },
    image: {
      table: {
        disable: true
      }
    }
  }}
  args={{
    number: 1,
    url: 'https://www.vic.gov.au',
    title: 'Small Business Ventilation Program',
    default: '<p>Funding for public-facing small businesses to purchase equipment and upgrades to improve ventilation and reduce the spread of COVID-19 and boost customer confidence.</p>'
  }}
/>

# Card

<ArgsTable of={RplCallToAction} />

## Call to action

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