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

export const samples = {
  meta: [
    '',
    '<RplTag variant="neutral" label="Profile"></RplTag>',
  ]
}

export const SingleTemplate = (args) => ({
  components: { RplAvatarCard, RplTag },
  setup() {
    const img = { src: svgPlaceholder({ width: 220, height: 220, bgColor: '#da7', fgColor: '#333' }) }
    return { args, img }
  },
  template: `
  <ul class="rpl-storybook__page rpl-grid">
    <RplAvatarCard
      v-for="(item, index) of args.number"
      :key="index"
      el="li"
      v-bind="args"
      class="rpl-col-12 rpl-col-6-m rpl-col-4-l"
      :image="img"
      url="${args.url}"
      title="${args.title}"
    >
      <template #meta>
        ${args.meta}
      </template>
      ${args.default}
    </RplAvatarCard>
  </ul>
  `
})

<Meta
  title='Core/Navigation/Card'
  component={RplAvatarCard}
  argTypes={{
    number: {
      control: { type: 'select' },
      options: [1, 2, 4, 8]
    },
    meta: {
      control: { type: 'select' },
      options: samples.meta
    },
    title: {
      control: 'text'
    },
    url: {
      control: 'text'
    },
    el: {
      table: {
        disable: true
      }
    },
    image: {
      table: {
        disable: true
      }
    }
  }}
  args={{
    number: 1,
    url: 'https://www.vic.gov.au',
    meta: samples.meta[1],
    title: 'Mary Sherman Morgan',
    default: '<p>America&rsquo;s first female rocket scientist.</p>'
  }}
/>

# Card

<ArgsTable of={RplAvatarCard} />

## Avatar

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