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

export const SingleTemplate = (args) => ({
  components: { RplPagination },
  setup() {
    return { args }
  },
  template: '<div class="sb-demo-container"><RplPagination v-bind="args" /></div>'
})

<Meta
  title='Core/Navigation/Pagination'
  component={RplPagination}
  argTypes={{
    variant: {
      control: { type: 'select' },
      options: ['complex', 'simple']
    }
  }}
  args={{
    label: 'Page navigation',
    totalPages: 20,
    currentPage: 1,
    surroundingPages: 3,
    contentType: 'Page'
  }}
/>

# Pagination

<ArgsTable of={RplPagination} />

<Canvas>
  <Story
    name='Complex'
    play={a11yStoryCheck}
    args={{ currentPage: 10 }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Complex / First Page

This is an example showing the first page as active

<Canvas>
  <Story
    name='Complex/First page'
    play={a11yStoryCheck}
    args={{ currentPage: 1 }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Complex / Last Page

This is an example showing the last page as active

<Canvas>
  <Story
    name='Complex/Last page'
    play={a11yStoryCheck}
    args={{ currentPage: 20 }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Simple

This is an example of the simple pagination variant

<Canvas>
  <Story
    name='Simple'
    play={a11yStoryCheck}
    args={{ variant: 'simple', totalPages: 3 }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>


## Simple / Tally

This is an example of the simple pagination variant with optional tally

<Canvas>
  <Story
    name='Simple/Tally'
    play={a11yStoryCheck}
    args={{ variant: 'simple', showTally: true, totalPages: 5 }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
