import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplIntroHeader from './RplIntroHeader.vue'
import RplContent from '../content/RplContent.vue'
import { RplIconNames } from '../icon/constants'
import { a11yStoryCheck } from './../../../stories/interactions.js'

export const SingleTemplate = (args) => ({
  components: { RplIntroHeader, RplContent },
  setup() {
    return { args }
  },
  template: `
    <RplIntroHeader v-bind="args">
      <RplContent html="${args.content}" />
    </RplIntroHeader>
  `
})

<Meta
  title='Core/Containers/Header'
  component={RplIntroHeader}
  parameters={{
    layout: 'fullscreen',
  }}
  argTypes={{
    title: {
      control: 'text'
    },
    content: {
      control: 'text'
    },
    iconName: {
      control: { type: 'select' },
      options: RplIconNames
    }
  }}
  args={{
    title: 'The intro title',
    content: '<p>In do dolore dolore sint ipsum est est, commodo ex laborum Lorem ut deserunt dolore ullamco.</p>'
  }}
/>

# Header

<ArgsTable of={RplIntroHeader} />

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

## Intro / With Icon

This is an example the intro header with optional icon

<Canvas>
  <Story
    name='Intro/With icon'
    play={a11yStoryCheck}
    args={{
      iconName: 'icon-exclamation-circle-filled',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Intro / With Links

This is an example the intro header with optional links

<Canvas>
  <Story
    name='Intro/With links'
    play={a11yStoryCheck}
    args={{
      iconName: 'icon-information-circle-filled',
      links: {
        title: 'Want to know more',
        items: [
          {text: 'First links', url: '#first', icon: 'icon-arrow-right'},
          {text: 'Second link', url: '#second', icon: 'icon-arrow-right'},
          {text: 'A third link', url: '#third', icon: 'icon-arrow-right'},
        ]
      }
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
