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

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

<Meta title='Core/Navigation/Breadcrumbs' component={RplBreadcrumbs} />

# Breadcrumbs

<ArgsTable of={RplBreadcrumbs} />

## Default

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
    args={{
      items: [
        { text: 'Home', url: '/' },
        { text: 'About the VIC Government', url: '#' },
        { text: "Using Victoria's data", url: '#' }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Example / Long title

There should be practical limits on how long a breadcrumb link is allowed to be, but the following demonstrates how
to deal with this use case. At mobile widths, the breadcrumb reverts to showing the parent link and will truncate to
ellipsis if the title is longer than the page width.

<Canvas>
  <Story
    name='Example/Long title'
    play={a11yStoryCheck}
    args={{
      items: [
        { text: 'Home is the traditional entry point to any website', url: '/' },
        { text: 'An extraordinarily long title that really should not be allowed but will be useful to test mobile width', url: '#' }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Example / Many links

This is a more real world example, but this time it's too deep. The ideal number of breadcrumbs should be between 2-4.

<Canvas>
  <Story
    name='Example/Many links'
    play={a11yStoryCheck}
    args={{
      items: [
        { text: 'Home', url: '/' },
        { text: 'About the VIC Government', url: '#' },
        { text: 'The state government', url: '#' },
        { text: 'Victoria is the state', url: '#' },
        { text: 'VIC government data', url: '#' },
        { text: "Using Victoria's data", url: '#' }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
