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

export const SingleTemplate = (args) => ({
  components: { RplCategoryGridCard },
  setup() {
    const img = { src: svgPlaceholder({ width: 1200, height: 800, bgColor: '#e76', fgColor: '#a31' }) }
    return { args, img }
  },
  template: `
  <div class="rpl-storybook__page">
    <ul class="rpl-grid">
      <RplCategoryGridCard
        v-for="(item, index) of args.number"
        :key="index"
        el="li"
        v-bind="args"
        class="rpl-col-12 rpl-col-6-s rpl-col-4-l rpl-col-3-xl"
        :image="img"
        url="${args.url}"
        title="${args.title}"
      >
        ${args.default}
      </RplCategoryGridCard>
    </ul>
  </div>
  `
})

<Meta
  title='Core/Navigation/Card'
  component={RplCategoryGridCard}
  argTypes={{
    number: {
      control: { type: 'select' },
      options: [1, 2, 4, 8]
    },
    heading: {
      control: 'text'
    },
    title: {
      control: 'text'
    },
    url: {
      control: 'text'
    },
    el: {
      table: {
        disable: true
      }
    },
    image: {
      table: {
        disable: true
      }
    }
  }}
  args={{
    number: 1,
    heading: 'Species',
    url: 'https://www.vic.gov.au',
    image: { src: svgPlaceholder({ width: 53, height: 53, bgColor: '#4c6', fgColor: '#333' }) },
    title: 'Ash',
    default: '<p><em>Fraxinus</em>, commonly called ash, is a genus of flowering plants in the olive and lilac family, Oleaceae.</p>'
  }}
/>

# Card

<ArgsTable of={RplCategoryGridCard} />

## Category grid

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