import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplResultListing from './RplResultListing.vue'
import RplResultListingItem from './RplResultListingItem.vue'
import RplSearchResult from './RplSearchResult.vue'
import { a11yStoryCheck } from './../../../stories/interactions.js'
import RplList from '../list/RplList.vue'
import RplIcon from '../icon/RplIcon.vue'

export const SingleTemplate = (args) => ({
  components: { RplResultListing, RplResultListingItem, RplSearchResult, RplList, RplIcon },
  setup() {
    return { args }
  },
  template: `
    <div class="rpl-storybook__page-content">
      <RplResultListing>
        <RplResultListingItem
          v-for="(item, index) of args.number"
          :key="index"
        >
          <RplSearchResult
            v-bind="args"
          >
            <template v-if="args.meta" #meta>
              ${args.meta}
            </template>
            <template v-if="args.details" #details>
              ${args.details}
            </template>
          </RplSearchResult>
        </RplResultListingItem>
      </RplResultListing>
    </div>
  `
})

<Meta
  title='Core/Navigation/Result listing'
  component={RplResultListing}
  argTypes={{
    number: {
      control: { type: 'select' },
      options: [1, 2, 4, 8]
    },
  }}
  args={{
    number: 3,
    title: 'The page title',
    url: 'https://www.vic.gov.au/victorian-government-directory',
    content: 'Adipisicing aliquip culpa dolor proident enim et tempor anim elit occaecat fugiat do <strong>volar</strong> consectetur.',
    updated: '22 Dec 2022'
  }}
/>

# Result listing

<ArgsTable of={RplResultListing} />

<Canvas>
  <Story
    name='Result listing'
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## With Meta

This is an example showing the result listing with metadata

<Canvas>
  <Story
    name='With Meta'
    play={a11yStoryCheck}
    args={{
      meta: '<span class="rpl-result-listing__topic">Topic</span><span class="rpl-result-listing__published">10 Aug 2022</span>',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## With Details

This is an example showing the result listing with extra details

<Canvas>
  <Story
    name='With Details'
    play={a11yStoryCheck}
    args={{
      details: `<RplList :items="[
        { text: 'Department', icon: 'icon-user-circle-filled' },
        { text: '$10,000 - $20,000', icon: 'icon-dollar-circle-filled' },
        { text: 'Closed', icon: 'icon-cancel-circle-filled', iconColour: 'error' }
      ]" />`
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
