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

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

<Meta
  title='Core/Containers/Data table'
  component={RplDataTable}
/>

# Data table

<ArgsTable of={RplDataTable} />

<Canvas>
  <Story
    name="Custom content"
    play={a11yStoryCheck}
    args={{
      caption: "Optional table caption",
      footer: "Optional table footer",
      columns: [
        "Column 1",
        "Column 2",
        "Column 3",
        "Column 4"
      ],
      items: [
        [
          "R1 - C1",
          "R1 - C2",
          "R1 - C3",
          "R1 - C4",
          [
            "<p><strong>R1 test heading</strong></p><p>R1 test content</p>"
          ]
        ],
        [
          "R2 - C1",
          "R2 - C2",
          "R2 - C3",
          "R2 - C4",
          [
            "<p><strong>R2 test heading</strong></p><p>R2 test content</p>"
          ]
        ],
        [
          "R3 - C1",
          "R3 - C2",
          "R3 - C3",
          "R3 - C4",
          [
            "R3 test content text only"
          ]
        ]
      ],
      headingType: {
        vertical: true
      },
      alignHidden: 1
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name="Structured content"
    play={a11yStoryCheck}
    args={{
      caption: "Optional table caption",
      footer: "Optional table footer",
      columns: [
        "Column 1",
        "Column 2",
        "Column 3",
        "Column 4"
      ],
      items: [
        [
          "R1 - C1",
          "R1 - C2",
          "R1 - C3",
          "R1 - C4",
          [
            [
              {
                items: [
                  {
                    heading: "R1 test heading",
                    content: "R1 test content"
                  },
                  {
                    heading: "R1 test heading 2",
                    content: "R1 test content 2"
                  }
                ]
              }
            ]
          ]
        ],
        [
          "R2 - C1",
          "R2 - C2",
          "R2 - C3",
          "R2 - C4",
          [
            [
              {
                items: [
                  {
                    heading: "R2 test heading",
                    content: "R2 test content"
                  },
                  {
                    heading: "R2 test heading 2",
                    content: "R2 test content 2"
                  },
                  {
                    heading: "R2 test heading 3",
                    content: "R2 test content 3"
                  }
                ]
              }
            ]
          ]
        ],
        [
          "R3 - C1",
          "R3 - C2",
          "R3 - C3",
          "R3 - C4",
          [
            [
              {
                items: [
                  {
                    heading: "R3 test heading",
                    content: "R3 test content"
                  }
                ]
              }
            ]
          ]
        ]
      ],
      headingType: {
        vertical: true
      },
      alignHidden: 1
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
