import React from 'react'
import { storiesOf, action } from '@storybook/react'
import NavbarMenu from '.'
import StoryWrapper from 'storybookComponents/StoryWrapper'

storiesOf('Navbar Menu', module).addWithInfo(
  'basic usage',
  `
        This is the basic usage of the Navbar Menu.

        #### Props:
        ---
        - role: string (optional)
        - className: string (optional)
        - menuElements: Array of
          - label: string
          - active: boolean (optional)
          - onClick: function (optional for dropdowns otherwise required)
          - dropdownMenuElements: Array of (optional)
            - label: string
            - onClick: function
      `,
  () => {
    const menuItems = [
      {
        label: 'Home',
        active: true,
        onClick: action('Click on Home')
      },
      {
        label: 'Technology',
        onClick: action('Click on Technology')
      },
      {
        label: 'Tokens',
        onClick: action('Click on Tokens')
      },
      {
        label: 'WhitePaper',
        dropdownMenuElements: [
          {
            label: 'Option 1',
            onClick: action('Click on WhitePaper/Option 1')
          },
          {
            label: 'Option 2',
            onClick: action('Click on WhitePaper/Option 2')
          },
          {
            label: 'Option 3',
            onClick: action('Click on WhitePaper/Option 3')
          }
        ]
      }
    ]

    return (
      <StoryWrapper>
        <NavbarMenu menuItems={menuItems} />
      </StoryWrapper>
    )
  }
)
