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

export const backgroundSample = {
  src: '/img/image-landscape-s.jpg',
  srcSet: '/img/image-landscape-s.jpg 640w, /img/image-landscape-m.jpg 960w , /img/image-landscape-l.jpg 1240w',
  sizes: '(min-width: 640px) 640px, (min-width: 960px) 960px, (min-width: 1240px) 1240px',
  height: 1920,
  width: 2880,
}

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

<Meta
  title='Core/Containers/Header'
  component={RplHeroHeader}
  parameters={{
    layout: 'fullscreen',
  }}
  argTypes={{
    theme: {
      control: { type: 'select' },
      options: RplHeaderThemes
    },
  }}
  args={{
    title: 'Find, connect, shape your Victoria',
    content: 'Access grants and services, find out what\'s on in Victoria and have your say on government decisions.'
  }}
/>

# Header
## Default

<ArgsTable of={RplHeroHeader} />

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
    argTypes={{
      cornerTop: {
        control: { type: 'text' },
      },
      cornerBottom: {
        control: { type: 'text' },
      },
    }}
    args={{
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Default / No corner graphics

This is an example header with no corner graphics

<Canvas>
  <Story
    name='Default/No corner graphics'
    play={a11yStoryCheck}
    args={{
      cornerTop: false,
      cornerBottom: false
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Default / Custom corner graphics

This is an example header using custom corner graphics

<Canvas>
  <Story
    name='Default/Custom corner graphics'
    play={a11yStoryCheck}
    args={{
      cornerTop: '/img/hero-corner-top.png',
      cornerBottom: '/img/hero-corner-bottom.png'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Default / Logo

This is an example header with a logo image

<Canvas>
  <Story
    name='Default/Logo'
    play={a11yStoryCheck}
    args={{
      cornerTop: true,
      logo: {
        src: svgPlaceholder({ width: 300, height: 200 }),
        alt: 'A description of the logo'
      }
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Default / Journey links

This is an example header with journey links

<Canvas>
  <Story
    name='Default/Journey links'
    play={a11yStoryCheck}
    args={{
      links: {
        title: 'Want to know more',
        items: [
          {text: 'First links', url: '#first'},
          {text: 'Second link', url: '#second'},
          {text: 'A third link', url: '#third'},
        ]
      }
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Default / Call to action

This is an example header with a call to action

<Canvas>
  <Story
    name='Default/Call to action'
    play={a11yStoryCheck}
    args={{
      primaryAction: { text: 'Primary action', url: '#primary' },
      secondaryAction: { title: 'Want to know more', text: 'Secondary action', url: '#secondary' },
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Reverse

<ArgsTable of={RplHeroHeader} />

<Canvas>
  <Story
    name='Reverse'
    play={a11yStoryCheck}
    argTypes={{
      cornerTop: {
        control: { type: 'text' },
      },
      cornerBottom: {
        control: { type: 'text' },
      },
    }}
    args={{
      theme: 'reverse',
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Reverse / Journey links

This is an example header with journey links using the reverse theme

<Canvas>
  <Story
    name='Reverse/Journey links'
    play={a11yStoryCheck}
    args={{
      theme: 'reverse',
      links: {
        title: 'Want to know more',
        items: [
          {text: 'First links', url: '#first'},
          {text: 'Second link', url: '#second'},
          {text: 'A third link', url: '#third'},
        ]
      }
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Default / Call to action

This is an example header with a call to action using the reverse theme

<Canvas>
  <Story
    name='Reverse/Call to action'
    play={a11yStoryCheck}
    args={{
      theme: 'reverse',
      primaryAction: { text: 'Primary action', url: '#primary' },
      secondaryAction: { title: 'Want to know more', text: 'Secondary action', url: '#secondary' },
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Image / Reverse

This is an example header with optional background using the reverse theme

<Canvas>
  <Story
    name='Image/Reverse'
    play={a11yStoryCheck}
    args={{
      theme: 'reverse',
      background: backgroundSample,
      cornerTop: false,
      cornerBottom: false
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Image / Neutral

This is an example header with optional background using the neutral theme

<Canvas>
  <Story
    name='Image/Neutral'
    play={a11yStoryCheck}
    args={{
      theme: 'neutral',
      background: backgroundSample,
      cornerTop: false,
      cornerBottom: false
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
