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

export const SingleTemplate = (args) => ({
  components: { RplFile },
  setup() {
    return { args }
  },
  template: '<RplFile v-bind="args" />'
})

<Meta
  title='Core/Containers/File'
  component={RplFile}
  argTypes={{
    name: { type: 'string' },
    url: { type: 'string' },
    size: { type: 'string' },
    extension: { type: 'string' },
    caption: { type: 'string' },
    updated: { type: 'string' }
  }}
  args={{
    name: 'This is an example of a document title',
    url: 'https://vic.gov.au/test',
    size: '1.5mb',
    extension: 'pdf',
  }}
/>

# File

<ArgsTable of={RplFile} />

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
    args={{
      name: 'An example of a document title that is a little longer'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Example / With Date

This is example shows the file component with the caption copy below.

<Canvas>
  <Story
    name='With Date'
    play={a11yStoryCheck}
    args={{
      updated: 'July 17, 2022'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Example / With Caption

This is example shows the file component with the caption copy below.

<Canvas>
  <Story
    name='With Caption'
    play={a11yStoryCheck}
    args={{
      caption: 'And this is example of a longer description of the document, this one seems very descriptive.'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
