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

export const SingleTemplate = (args) => ({
  components: { RplVerticalNav },
  setup() {
    return { args }
  },
  template: `
  <div class="rpl-storybook__page rpl-grid">
    <div class="rpl-col-12 rpl-col-4-m">
      <RplVerticalNav v-bind="args" />
    </div>
  </div>
  `
})

<Meta title='Core/Navigation/Vertical navigation' component={RplVerticalNav} />

# Vertical nav

<ArgsTable of={RplVerticalNav} />

<Canvas>
  <Story
    name='Vertical navigation'
    play={a11yStoryCheck}
    args={{
      title: 'Section name',
      items: [
        { id: '1', text: 'First level', active: true, items: [
          { id: '2', text: 'First level repeat', url: '#' },
          { id: '3', text: 'Second level', url: '#', items: [
            { id: '4', text: 'Third level link with some text that will need to wrap', url: '#', items: [
              { id: '5', text: 'Fourth level', url: '#' }
            ]}
          ]},
          { id: '6', text: 'Second level active', url: '#', active: true },
          { id: '7', text: 'Second level', url: '#' }
        ]},
        { id: '8', text: 'First level', items: [
          { id: '9', text: 'First level repeat', url: '#' },
          { id: '10', text: 'Second level', url: '#', items: [
            { id: '11', text: 'Third level link with some text that will need to wrap', url: '#', items: [
              { id: '12', text: 'Fourth level', url: '#' }
            ]}
          ]},
          { id: '13', text: 'Second level', url: '#' },
          { id: '14', text: 'Second level', url: '#' }
        ]},
        { id: '15', text: 'First level no children', url: '#' },
        { id: '16', text: 'First level no children active', url: '#', active: true },
        { id: '17', text: 'First level', items: [
          { id: '18', text: 'First level repeat', url: '#' },
          { id: '19', text: 'Second level', url: '#', items: [
            { id: '20', text: 'Third level link with some text that will need to wrap', url: '#', items: [
              { id: '21', text: 'Fourth level', url: '#' }
            ]}
          ]},
          { id: '22', text: 'Second level', url: '#' },
          { id: '23', text: 'Second level', url: '#' }
        ]},
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
