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

export const SingleTemplate = (args) => ({
  components: { RplPageLinks, RplPageLinksItem },
  setup() {
    return { args }
  },
  template: `<div class="rpl-storybook__page">
    <RplPageLinks>
      <RplPageLinksItem
        v-if="args.prev"
        direction="prev"
        v-bind="args.prev"
      >
        {{args.prev.description}}
      </RplPageLinksItem>
      <RplPageLinksItem
        v-if="args.next"
        direction="next"
        v-bind="args.next"
      >
        {{args.next.description}}
      </RplPageLinksItem>
    </RplPageLinks>
  </div>`
})

<Meta
  title='Core/Navigation/Page links'
  component={RplPageLinks}
/>

# Page links

<ArgsTable of={RplPageLinks} />

<Canvas>
  <Story
    name='Page links'
    play={a11yStoryCheck}
    args={{
      prev: { description: 'Check out this page', url: '#page' },
      next: { description: 'Another page to look at', url: '#another-page' },
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Example / With "Page counts"

This is an example page links showing supplied "Page count""

<Canvas>
  <Story
    name='Example/Count'
    play={a11yStoryCheck}
    args={{
      prev: { description: '2 of 5', url: '#page' },
      next: { description: '4 of 5', url: '#another-page' },
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Example / Last page

This is an example of the page links on the final linkable page

<Canvas>
  <Story
    name='Example/Final page'
    play={a11yStoryCheck}
    args={{
      prev: { description: 'The title of a page', url: '#page' }
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Example / Descriptions

<Canvas>
  <Story
    name='Example/Descriptions'
    play={a11yStoryCheck}
    args={{
      prev: { label: 'Custom label', description: 'Check out this page', url: '#page' },
      next: { label: 'Another custom label', description: 'Another page to look at like the others, but this one has an incredibly over-long description that should break a typical line with its outrageously dense verbiage', url: '#another-page' },
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
