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

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

<Meta title='Core/Containers/Timeline' component={RplTimeline} />

# Timeline

<ArgsTable of={RplTimeline} />

## Default

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
    args={{
      title: 'Timeline heading',
      items: [
        {
          image: { src: svgPlaceholder({ width: 320, height: 240 }) },
          title: 'Timeline item with link',
          url: '#',
          dateStart: '2019-01-01T09:00:00.000+10:00',
          dateEnd: '2020-12-01T09:00:00.000+10:00',
          description: 'Contains image, title, internal URL, different start / end date and description.'
        },
        {
          title: 'Timeline item 2',
          subtitle: 'Contains title and custom subtitle.'
        },
        {
          image: { src: svgPlaceholder({ width: 80, height: 80 }) },
          title: 'Timeline item 3',
          dateStart: '2018-01-01T09:00:00.000+10:00',
          dateEnd: '2018-01-15T09:00:00.000+10:00',
          subtitle: 'Custom subtitle - this should not show.',
          description: 'Contains image, title, different start / end date, subtitle (hidden) and description.'
        },
        {
          title: 'Timeline item 4',
          dateStart: '2018-03-01T09:00:00.000+10:00',
          dateEnd: '2018-03-01T09:00:00.000+10:00',
          description: 'Contains title, matching start / end date and description.'
        },
        {
          image: { src: svgPlaceholder({ width: 80, height: 80 }) },
          title: 'Timeline item 5 with link',
          url: 'https://www.google.com',
          description: 'Contains an image, title, external URL and description.'
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Headings only

<Canvas>
  <Story
    name='Headings only'
    play={a11yStoryCheck}
    args={{
      title: 'Timeline heading',
      items: [
        {
          title: 'Timeline item 1'
        },
        {
          title: 'Timeline item 2'
        },
        {
          title: 'Timeline item 3 with link',
          url: 'https://www.google.com'
        },
        {
          title: 'Timeline item 4'
        },
        {
          title: 'Timeline item 5'
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Progressive / Active

<Canvas columns={3}>
  <Story
    name='Progressive/Active/1'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
          current: true,
        },
        {
          title: '2nd item',
          description: '',
        },
        {
          image: null,
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          url: 'https://g',
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Progressive/Active/2'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
        },
        {
          title: '2nd item',
          description: '',
          current: true,
        },
        {
          image: null,
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          url: 'https://g',
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Progressive/Active/3'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
        },
        {
          title: '2nd item',
          description: '',
        },
        {
          image: null,
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          url: 'https://g',
          current: true,
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Progressive / With images

<Canvas columns={3}>
  <Story
    name='Progressive/Image/1'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          image: { src: svgPlaceholder({ width: 80, height: 80 }) },
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
          current: true,
        },
        {
          title: '2nd item',
          description: '',
        },
        {
          image: null,
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          url: 'https://g',
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Progressive/Image/2'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
          current: true,
        },
        {
          image: { src: svgPlaceholder({ width: 80, height: 80 }) },
          title: '2nd item',
        },
        {
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          current: false,
          url: 'https://g',
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Progressive/Image/3'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
          current: true,
        },
        {
          title: '2nd item',
        },
        {
          image: { src: svgPlaceholder({ width: 80, height: 80 }) },
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          url: 'https://g',
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Progressive/Image/4'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          image: { src: svgPlaceholder({ width: 80, height: 80 }) },
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
        },
        {
          title: '2nd item',
          description: '',
          current: true,
        },
        {
          image: null,
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          url: 'https://g',
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Progressive/Image/5'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
        },
        {
          image: { src: svgPlaceholder({ width: 80, height: 80, bgColor: 'rgb(0, 82, 194)', fgColor: '#fff' }) },
          title: '2nd item',
          current: true,
        },
        {
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          current: false,
          url: 'https://g',
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Progressive/Image/6'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
        },
        {
          title: '2nd item',
          current: true,
        },
        {
          image: { src: svgPlaceholder({ width: 80, height: 80 }) },
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          url: 'https://g',
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Progressive/Image/7'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          image: { src: svgPlaceholder({ width: 80, height: 80 }) },
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
        },
        {
          title: '2nd item',
          description: '',
        },
        {
          image: null,
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          url: 'https://g',
          current: true,
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Progressive/Image/8'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
        },
        {
          image: { src: svgPlaceholder({ width: 80, height: 80 }) },
          title: '2nd item',
        },
        {
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          current: true,
          url: 'https://g',
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Progressive/Image/9'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
        },
        {
          title: '2nd item',
        },
        {
          image: { src: svgPlaceholder({ width: 80, height: 80 }) },
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          url: 'https://g',
          current: true,
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Progressive/Image/10'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
        },
        {
          title: '2nd item',
          description: '<p>Text</p><p>Another line, why not</p>',
        },
        {
          title: 'Third item',
          description: '<p>Some text</p>',
          current: true
        },
        {
          image: { src: svgPlaceholder({ width: 80, height: 80 }) },
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          url: 'https://g'
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Progressive/Image/11'
    play={a11yStoryCheck}
    args={{
      title: false,
      items: [
        {
          title: 'First item',
          description: '<p>Text</p><p>Another line, why not</p>',
        },
        {
          title: '2nd item',
          description: '<p>Some text</p>',
        },
        {
          title: 'Third item',
          image: { src: svgPlaceholder({ width: 80, height: 80, bgColor: 'rgb(0, 82, 194)', fgColor: '#fff' }) },
          description: '<p>Text</p><p>Another line, why not</p>',
          current: true
        },
        {
          title: 'The last item',
          description: '<p>Different <em>markup</em></p>',
          url: 'https://g'
        }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
