import {
  Canvas,
  Meta,
  Story
} from '@storybook/addon-docs'
import { ArgsTable } from '@storybook/addon-docs'
import RplTextLink from './RplTextLink.vue'
import RplIcon from '../icon/RplIcon.vue'
import { within, userEvent } from '@storybook/testing-library'
import { eventCheck, a11yCheck, a11yStoryCheck } from './../../../stories/interactions.js'
const eventTestFunction = async ({ canvasElement }) => {
  const canvas = await within(canvasElement)
  const link = await canvas.getByText(/event-tracked link/i)
  await a11yCheck(canvasElement)
  await eventCheck(link, 'rpl-text-link/click')
}

export const Template = (args) => ({
  components: { RplTextLink },
  setup() { return { args } },
  template: '<p class="sb-container rpl-type-p">This para contains a <RplTextLink @click.prevent="args.onClick()" v-bind="args">link</RplTextLink> in the middle.</p>'
})

<Meta
  title='Core/Navigation/Text link'
  component={{RplTextLink}}
  argTypes={{
    onClick: { action: 'clicked' },
    url: {
      control: 'text'
    }
  }}
  args={{
    url: "https://www.vic.gov.au/non-visited"
  }}
/>

<ArgsTable of={RplTextLink} />

## Default

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

## Content example

<Canvas>
  <Story name="Example/Content/Accent" play={a11yStoryCheck}>
    {(args) => {
      return {
        components: { RplTextLink },
        setup() { return { args } },
        template: '<p class="sb-container rpl-type-p">This para contains a <RplTextLink v-bind="args">voilà</RplTextLink> in the middle.</p>'
      }
    }}
  </Story>
  <Story name="Example/Content/Emoji" play={a11yStoryCheck}>
    {(args) => {
      return {
        components: { RplTextLink },
        setup() { return { args } },
        template: '<p class="sb-container rpl-type-p">This para contains a <RplTextLink v-bind="args">😍</RplTextLink> in the middle.</p>'
      }
    }}
  </Story>
  <Story name="Example/Content/Target" play={a11yStoryCheck}>
    {(args) => {
      return {
        components: { RplTextLink },
        setup() { return { args } },
        template: `<p class="sb-container rpl-type-p">This para contains a <RplTextLink v-bind="args" target="_blank">link that opens in a new window</RplTextLink> in the middle.</p>`
      }
    }}
  </Story>
</Canvas>

## Component example

<Canvas>
  <Story name="Example/Component/Icon" play={a11yStoryCheck}>
    {(args) => {
      return {
        components: { RplTextLink, RplIcon },
        setup() { return { args } },
        template: `<p class="sb-container rpl-type-p">This para contains an <RplTextLink v-bind="args"><RplIcon name="icon-pin" title="download icon"></RplIcon></RplTextLink> in the middle.</p>`
      }
    }}
  </Story>
</Canvas>

## Eventbus

<Canvas>
  <Story
    name="Example/Eventbus"
    play={eventTestFunction}
  >
    {(args) => {
      return {
        components: { RplTextLink },
        setup() { return { args } },
        template: `<p class="sb-container rpl-type-p">This para contains an <RplTextLink v-bind="args" @click.prevent="args.onClick()">event-tracked link</RplTextLink> in the middle.</p>`
      }
    }}
  </Story>
</Canvas>
