import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplPageAction from './RplPageAction.vue'
import RplDocument from '../document/RplDocument.vue'
import RplFile from '../file/RplFile.vue'
import RplIcon from '../icon/RplIcon.vue'
import { a11yStoryCheck } from './../../../stories/interactions.js'

export const sampleUpper = `<RplDocument url="https://vic.gov.au/#print">
  <template #icon>
    <RplIcon name="icon-print-lined" size="l" colour="default" />
  </template>
  <template #name>
    Print document
  </template>
</RplDocument>`

export const sampleDefault = `<RplFile v-bind="args" /><RplFile v-bind="args" /><RplFile v-bind="args" />`

<Meta
  title='Core/Containers/Page action'
  component={RplPageAction}
  args={{
    upper: sampleUpper,
    default: sampleDefault
  }}
/>

# Page Action

<ArgsTable of={RplPageAction} />

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
    args={{
      name: 'The document title',
      url: 'https://vic.gov.au/',
      size: '1.5mb',
      extension: 'pdf'
    }}
  >
    {(args) => {
      return {
        components: { RplPageAction, RplDocument, RplFile, RplIcon },
        setup() {
          return { args }
        },
        template: `
          <RplPageAction>
            <template #upper>
              ${args.upper}
            </template>
            ${args.default}
          </RplPageAction>
        `
      }
    }}
  </Story>
</Canvas>

## Example / With only documents

This is example shows the page action component with only documents.

<Canvas>
  <Story
    name='Only Documents'
    play={a11yStoryCheck}
    args={{
      name: 'Another document title',
      url: 'https://vic.gov.au/',
      size: '0.5mb',
      extension: 'csv'
    }}
  >
    {(args) => {
      return {
        components: { RplPageAction, RplFile },
        setup() {
          return { args }
        },
        template: `
          <RplPageAction>
            ${args.default}
          </RplPageAction>
        `
      }
    }}
  </Story>
</Canvas>

## Example / With only print

This is example shows the page action component with only print.

<Canvas>
  <Story
    name='Only Print'
    play={a11yStoryCheck}
  >
  {(args) => {
    return {
        components: { RplPageAction, RplDocument, RplIcon },
        template: `
          <RplPageAction>
            <template #upper>
              ${args.upper}
            </template>
          </RplPageAction>
        `
      }
    }}
  </Story>
</Canvas>
