import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplContent from './RplContent.vue'
import { a11yStoryCheck } from './../../../stories/interactions.js'
import testcontent from './fixtures/testcontent.html?raw'

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

<Meta title='Core/Containers/Content' component={RplContent} />

# Content

<ArgsTable of={RplContent} />

<Canvas>
  <Story
    name='All content'
    play={a11yStoryCheck}
    args={{
      html: testcontent
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Callout'
    play={a11yStoryCheck}
    args={{
      html: `
    <div class="rpl-callout">
      <h3>H3 Heading</h3>
      <p>
        Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat.
      </p>
    </div>
  `
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Callout - Neutral'
    play={a11yStoryCheck}
    args={{html: `
    <div class="rpl-callout rpl-callout--neutral">
      <p>
        Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
        do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        aliquip ex ea commodo consequat.
      </p>
    </div>
  `
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Blockquote'
    play={a11yStoryCheck}
    args={{
      html: `
      <figure class="rpl-blockquote">
        <blockquote class="rpl-blockquote__quote">
          <p class="rpl-type-p-large-fixed">
            "Berios sim destrum facientota nis ex eost aut prae vendis explam aliquis dolorpo rrorem reptaep elenis net."
          </p>
        </blockquote>
        <figcaption class="rpl-blockquote__author rpl-type-label-small">
          <span class="rpl-blockquote__author-name">Her Excellency the Honourable Linda Dessau AC</span>
          <span class="rpl-blockquote__author-title">Governor of Victoria</span>
        </figcaption>
      </figure>
  `
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Blockquote - Multiline'
    play={a11yStoryCheck}
    args={{
      html: `
      <figure class="rpl-blockquote">
        <blockquote class="rpl-blockquote__quote">
          <p class="rpl-type-p-large-fixed">
            "Berios sim destrum facientota nis ex eost aut prae vendis explam aliquis dolorpo rrorem reptaep elenis net."
          </p>
          <p class="rpl-type-p-large-fixed">
            "Destrum facientota nis ex eost aut prae vendis explam aliquis dolorpo rrorem reptaep elenis net."
          </p>
        </blockquote>
        <figcaption class="rpl-blockquote__author rpl-type-label-small">
          <span class="rpl-blockquote__author-name">Her Excellency the Honourable Linda Dessau AC</span>
          <span class="rpl-blockquote__author-title">Governor of Victoria</span>
        </figcaption>
      </figure>
  `
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='File'
    play={a11yStoryCheck}
    args={{
      html: `
      <figure class="rpl-document">
        <a
         class="rpl-document__link rpl-u-focusable-within"
         aria-label="Example file File type: PDF. Size: 1.5 mb."
         href="http://vic.gov.au/"
         target="_blank">
          <span class="rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-document-lined">
            <svg role="presentation"><use xlink:href="#icon-document-lined"></use></svg>
          </span>
          <div class="rpl-document__content">
            <span class="rpl-document__name rpl-type-p rpl-type-weight-bold rpl-u-focusable-inline">This is an example of a document title</span>
            <div class="rpl-document__info rpl-type-label-small">
              <span class="rpl-file__meta">PDF</span>
              <span class="rpl-file__meta">1.5 mb</span>
            </div>
          </div>
        </a>
      </figure>
  `
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='File - All props'
    play={a11yStoryCheck}
    args={{
      html: `
      <figure class="rpl-document">
        <a
         tabindex="-1"
         class="rpl-document__link"
         aria-label="Example file File type: PDF. Size: 1.5 mb."
         href="http://vic.gov.au/"
         target="_blank">
          <span class="rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-document-lined">
            <svg role="presentation"><use xlink:href="#icon-document-lined"></use></svg>
          </span>
          <div class="rpl-document__content">
            <span class="rpl-document__name rpl-type-p rpl-type-weight-bold rpl-u-focusable-inline" tabindex="0">This is an example of a document title</span>
            <div class="rpl-document__info rpl-type-label-small">
              <span class="rpl-file__meta">PDF</span>
              <span class="rpl-file__meta">1.5 mb</span>
              <div class="rpl-file__updated">Updated July 17, 2022</div>
            </div>
          </div>
        </a>
        <figcaption v-if="caption" class="rpl-document__caption rpl-type-p-small">
          And this is example of a longer description of the document, this one seems very descriptive.
        </figcaption>
      </figure>
  `
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Table'
    play={a11yStoryCheck}
    args={{html: `
     <div class="rpl-table">
      <div class="rpl-table__scroll-container" tabindex="0">
        <table>
          <tbody>
            <tr>
              <td>Lorem quis do ea aliqua est.</td>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
            <tr>
              <td>Lorem quis do ea aliqua est.</td>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
            <tr>
              <td>Lorem quis do ea aliqua est.</td>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
            <tr>
              <td>Lorem quis do ea aliqua est.</td>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
            <tr>
              <td>Lorem quis do ea aliqua est.</td>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  `}}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Table - Header'
    play={a11yStoryCheck}
    args={{html: `
     <div class="rpl-table">
      <div class="rpl-table__scroll-container" tabindex="0">
        <table>
          <thead>
            <tr>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
              <th>Column 4</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Lorem quis do ea aliqua est.</td>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
            <tr>
              <td>Lorem quis do ea aliqua est.</td>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
            <tr>
              <td>Lorem quis do ea aliqua est.</td>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
            <tr>
              <td>Lorem quis do ea aliqua est.</td>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
            <tr>
              <td>Lorem quis do ea aliqua est.</td>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4">Optional table footer</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  `}}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Table - Caption'
    play={a11yStoryCheck}
    args={{html: `
     <div class="rpl-table">
      <div class="rpl-table__scroll-container" tabindex="0">
        <table>
          <caption>Optional table caption</caption>
          <tbody>
            <tr>
              <th>Lorem quis do ea aliqua est.</th>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
            <tr>
              <th>Lorem quis do ea aliqua est.</th>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
            <tr>
              <th>Lorem quis do ea aliqua est.</th>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
            <tr>
              <th>Lorem quis do ea aliqua est.</th>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
            <tr>
              <th>Lorem quis do ea aliqua est.</th>
              <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quis do ea aliqua est, quis.</td>
              <td>Lorem quis do ea aliqua est commodo et laborum.</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4">Optional table footer</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  `}}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Table - Header & Caption'
    play={a11yStoryCheck}
    args={{html: `
     <div class="rpl-table">
        <div class="rpl-table__scroll-container" tabindex="0">
          <table>
            <caption>Optional table caption</caption>
            <thead>
              <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Lorem quis do ea aliqua est.</td>
                <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
                <td>Lorem quis do ea aliqua est, quis.</td>
                <td>Lorem quis do ea aliqua est commodo et laborum.</td>
              </tr>
              <tr>
                <td>Lorem quis do ea aliqua est.</td>
                <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
                <td>Lorem quis do ea aliqua est, quis.</td>
                <td>Lorem quis do ea aliqua est commodo et laborum.</td>
              </tr>
              <tr>
                <td>Lorem quis do ea aliqua est.</td>
                <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
                <td>Lorem quis do ea aliqua est, quis.</td>
                <td>Lorem quis do ea aliqua est commodo et laborum.</td>
              </tr>
              <tr>
                <td>Lorem quis do ea aliqua est.</td>
                <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
                <td>Lorem quis do ea aliqua est, quis.</td>
                <td>Lorem quis do ea aliqua est commodo et laborum.</td>
              </tr>
              <tr>
                <td>Lorem quis do ea aliqua est.</td>
                <td>Lorem quis do ea aliqua est ea Lorem nostrud tempor.</td>
                <td>Lorem quis do ea aliqua est, quis.</td>
                <td>Lorem quis do ea aliqua est commodo et laborum.</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="4">Optional table footer</td>
              </tr>
            </tfoot>
          </table>
        </div>
    </div>
  `}}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Table - Scrollable'
    play={a11yStoryCheck}
    args={{html: `
     <div class="rpl-table">
      <div class="rpl-table__scroll-container" tabindex="0">
        <table>
          <caption>Optional table caption</caption>
          <thead>
            <tr>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
              <th>Column 4</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Lorem quis do quiceaaliquaest.</td>
              <td>Loremquisdoealiqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quisdoeaaliquaest, quis.</td>
              <td>Lorem quis do ea aliqua est commodoetlaborumetata.</td>
            </tr>
            <tr>
              <td>Lorem quis do quiceaaliquaest.</td>
              <td>Loremquisdoealiqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quisdoeaaliquaest, quis.</td>
              <td>Lorem quis do ea aliqua est commodoetlaborumetata.</td>
            </tr>
            <tr>
              <td>Lorem quis do quiceaaliquaest.</td>
              <td>Loremquisdoealiqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quisdoeaaliquaest, quis.</td>
              <td>Lorem quis do ea aliqua est commodoetlaborumetata.</td>
            </tr>
            <tr>
              <td>Lorem quis do quiceaaliquaest.</td>
              <td>Loremquisdoealiqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quisdoeaaliquaest, quis.</td>
              <td>Lorem quis do ea aliqua est commodoetlaborumetata.</td>
            </tr>
            <tr>
              <td>Lorem quis do quiceaaliquaest.</td>
              <td>Loremquisdoealiqua est ea Lorem nostrud tempor.</td>
              <td>Lorem quisdoeaaliquaest, quis.</td>
              <td>Lorem quis do ea aliqua est commodoetlaborumetata.</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4">Optional table footer</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  `}}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
