// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { FormattedMessage } from 'react-intl';
import { SecondaryNavigation } from './index';
import { configDocs } from '../../../../.storybook/config-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)
  .addDecorator(withInfo(configDocs(docs, SecondaryNavigation)))
  .add('normal', () => <SecondaryNavigation navItems={navItems} />)
  .add('with onClick', () => (
    <SecondaryNavigation
      navItems={navItems.map((item) => ({
        ...item,
        onClick: () =>
          alert('onClick. This happens before the href is directed to'),
      }))}
    />
  ))
  .add('showing horizontal scrolling', () => (
    <div style={{ maxWidth: '320px' }}>
      <SecondaryNavigation
        navItems={[
          {
            label: <FormattedMessage id="VeryLongLabel" />,
            href: 'https://wealthsimple.com',
          },
          ...navItems,
        ]}
      />
    </div>
  ));
