import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplFooter from './RplFooter.vue'
import { RplFooterVariants } from './constants'
import { a11yStoryCheck } from './../../../stories/interactions.js'
import { bpMin } from '../../lib/breakpoints'

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

<Meta
  title='Core/Navigation/Footer'
  component={RplFooter}
  argTypes={{
    variant: {
      control: { type: 'select' },
      options: RplFooterVariants
    },
  }}
  args={{
  variant: 'default',
  nav: [
    {
      text: 'Your Services',
      url: '#',
      items: [
        {
          text: 'Grants awards and assistance',
          url: '#'
        },
        {
          text: 'Law and safety',
          url: '#'
        },
        {
          text: 'Business and Industry',
          url: '#'
        },
        {
          text: 'Jobs and the Workplace',
          url: '#'
        },
        {
          text: 'Transport and Traffic',
          url: '#'
        },
        {
          text: 'Education',
          url: '#'
        },
        {
          text: 'Housing and Property',
          url: '#'
        },
        {
          text: 'Health',
          url: '#'
        },
        {
          text: 'Community',
          url: '#'
        },
        {
          text: 'Art, Culture and Sport',
          url: '#'
        },
        {
          text: 'Environment and Water',
          url: '#'
        }
      ]
    },
    {
      text: 'News',
      url: '#'
    },
    {
      text: 'About VIC Government - A very long title to test wrapping behaviour',
      url: '#',
      items: [
        {
          text: 'Grants awards and assistance',
          url: '#'
        },
        {
          text: 'Law and safety',
          url: '#'
        },
        {
          text: 'Business and Industry ',
          url: '#'
        },
        {
          text: 'Jobs and the Workplace',
          url: '#'
        },
        {
          text: 'Transport and Traffic',
          url: '#'
        },
        {
          text: 'Education',
          url: '#'
        },
        {
          text: 'Housing and Property',
          url: '#'
        },
        {
          text: 'Health',
          url: '#'
        },
        {
          text: 'Community',
          url: '#'
        },
        {
          text: 'Art, Culture and Sport',
          url: '#'
        },
        {
          text: 'Environment and Water',
          url: '#'
        }
      ]
    },
    {
      text: 'Events',
      url: '#'
    },
    {
      text: 'Connect with us',
      url: '',
      items: [
        {
          text: 'DFFH Twitter',
          url: '#',
          icon: 'icon-twitter'
        },
        {
          text: 'DH Twitter',
          url: '#',
          icon: 'icon-twitter'
        },
        {
          text: 'DFFH LinkedIn',
          url: '#',
          icon: 'icon-linkedin'
        },
        {
          text: 'DFFH Facebook',
          url: '#',
          icon: 'icon-facebook'
        },
        {
          text: 'Youtube',
          url: '#',
          icon: 'icon-youtube'
        }
      ]
    }
  ],
  links: [
    {
      text: 'Privacy',
      url: '#'
    },
    {
      text: 'Disclaimer',
      url: '#'
    },
    {
      text: 'Terms of use',
      url: '#'
    },
    {
      text: 'Sitemap',
      url: '#'
    },
    {
      text: 'Accessibility Statement',
      url: '#'
    },
    {
      text: 'Help',
      url: '#'
    }
  ],
  credit: 'Image credit: image metadata slash credit goes here.',
  copyright: '© Copyright State Government of Victoria',
  logos: [
    {
      src: svgPlaceholder({ width: 200, height: 80 }),
      alt: 'Landscape',
      url: '#'
    }
  ]
}}
/>

# Footer

<ArgsTable of={RplFooter} />

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
    parameters={{
      layout: 'fullscreen',
      chromatic: {
        viewports: [bpMin.s - 100, bpMin.s, bpMin.m, bpMin.l, bpMin.xl]
      }
    }}
  >
    {SingleTemplate.bind()}
  </Story>
  <Story
    name='Neutral'
    play={a11yStoryCheck}
    parameters={{
      layout: 'fullscreen',
      chromatic: {
        viewports: [bpMin.s - 100, bpMin.s, bpMin.m, bpMin.l, bpMin.xl]
      }
    }}
    args={{
      variant: 'neutral'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
