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

import { RplPrimaryNavItems } from './fixtures/sample'

export const SingleTemplate = (args) => ({
  components: { RplPrimaryNav },
  setup() {
    return { args }
  },
  template: `
    <RplPrimaryNav v-bind="args" />
    <div style="height: 200vh;"></div>
  `
})

export const CustomLoginButtonTemplate = (args) => ({
  components: { RplPrimaryNav },
  setup() {
    return { args }
  },
  template: `
  <RplPrimaryNav v-bind="args" >
    <template #userAction>
      <a
        class="
          rpl-type-label-small
          rpl-type-weight-bold
          rpl-u-focusable-block
        "
        href="/login"
        target="_blank"
      >
        <span class="rpl-u-margin-r-2"
        ><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-user-circle-filled" style="transform: translateY(2px);"
        ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xml:space="preserve"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 4c1.9 0 3.5 1.6 3.5 3.5S13.9 11 12 11 8.5 9.4 8.5 7.5 10.1 4 12 4zm6 12.7c0 .7-.6 1.3-1.3 1.3H7.3c-.7 0-1.3-.6-1.3-1.3v-1.1c0-2 1.6-3.6 3.6-3.6h.4c.6.3 1.3.4 2 .4s1.4-.2 2-.4h.4c2 0 3.6 1.6 3.6 3.6v1.1z"></path><path d="M0 0h24v24H0z" style="fill: none;"></path></svg></span
        ></span
        >&NoBreak;<span>Login</span>
      </a>
    </template>
  </RplPrimaryNav>
  <div style="height: 200vh;"></div>
  `
})

<Meta
  title='Core/Navigation/Primary nav'
  component={RplPrimaryNav}
  args={{
    primaryLogo: {
      href: '#',
      src: '/img/primary-nav-logo-primary.svg',
      printSrc: '/img/primary-nav-logo-primary-print.svg',
      altText: 'Primary logo alt text'
    },
    items: RplPrimaryNavItems
  }}
/>

# Primary nav

<ArgsTable of={RplPrimaryNav} />

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
    parameters={{
      layout: 'fullscreen'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='With secondary logo'
    play={a11yStoryCheck}
    parameters={{
      layout: 'fullscreen'
    }}
    args={{
      secondaryLogo: {
        href: '#',
        src: '/img/primary-nav-logo-secondary.svg',
        altText: 'Secondary logo alt text',
        printSrc: '/img/primary-nav-logo-secondary-print.svg'
      }
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

<Canvas>
  <Story
    name='With custom user action'
    play={a11yStoryCheck}
    parameters={{
      layout: 'fullscreen'
    }}
    args={{
      secondaryLogo: {
        href: '#',
        src: '/img/primary-nav-logo-secondary.svg',
        altText: 'Secondary logo alt text',
        printSrc: '/img/primary-nav-logo-secondary-print.svg'
      }
    }}
  >
    {CustomLoginButtonTemplate.bind()}
  </Story>
</Canvas>
