// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { FormattedMessage } from 'react-intl';
import { SecondaryNavigation } from './index';
import { withDocs } from '../../../../.storybook/with-docs';
import docs from './SECONDARY_NAVIGATION.mkd';

const navItems = [
  { label: 'Current path', href: window.location.pathname },
  { label: 'Tab 2', href: 'https://wealthsimple.com' },
];

storiesOf('Core/Navigation/SecondaryNavigation', module)
  .add(
    'normal',
    withDocs(docs)(() => <SecondaryNavigation navItems={navItems} />),
  )
  .add(
    'with onClick',
    withDocs(docs)(() => (
      <SecondaryNavigation
        navItems={navItems.map(item => ({
          ...item,
          onClick: () =>
            alert('onClick. This happens before the href is directed to'),
        }))}
      />
    )),
  )
  .add(
    'showing horizontal scrolling',
    withDocs(docs)(() => (
      <div style={{ maxWidth: '320px' }}>
        <SecondaryNavigation
          navItems={[
            {
              label: <FormattedMessage id="VeryLongLabel" />,
              href: 'https://wealthsimple.com',
            },
            ...navItems,
          ]}
        />
      </div>
    )),
  );
