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

export const sample = {
  items: [
    {
      title: 'Friday 23 September',
      subtitle: 'Friday before the AFL Grand Final',
      content: 'Friday before AFL Grand Final typically falls on the last Friday in September.'
    },
    {
      title: 'Tuesday 1 November',
      subtitle: 'Melbourne Cup',
      content: 'Public holiday across Victoria unless an alternate local holiday has been arranged by a non-metro council.'
    }
  ]
}

export const SingleTemplate = (args) => ({
  components: { RplKeyDatesCard },
  setup() {
    return { args }
  },
  template: `
  <div class="rpl-storybook__page rpl-grid">
    <RplKeyDatesCard
      v-bind="args"
      class="rpl-col-12 rpl-col-6-m rpl-col-4-l"
    >
      <template #meta>
        ${args.meta}
      </template>
      ${args.default}
    </RplKeyDatesCard>
  </div>
  `
})

<Meta
  title='Core/Navigation/Card'
  component={RplKeyDatesCard}
  argTypes={{
    el: {
      table: {
        disable: true
      }
    }
  }}
  args={{
    title: 'Key calendar dates',
    ctaTitle: 'Find all public holidays',
    url: 'https://business.vic.gov.au/business-information/public-holidays/victorian-public-holidays-2022',
    items: sample.items
  }}
/>

# Card

<ArgsTable of={RplKeyDatesCard} />

## Key dates

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