// @flow
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { SecondaryNavigation } from './secondary-navigation.component';
import docs from './secondary-navigation.mdx';

export default {
  component: SecondaryNavigation,
  title: 'Components/Navigation/SecondaryNavigation',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

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

export const Default = () => <SecondaryNavigation navItems={navItems} />;

export const OnClick = () => (
  <SecondaryNavigation
    navItems={navItems.map((item) => ({
      ...item,
      onClick: () =>
        alert('onClick. This happens before the href is directed to'),
    }))}
  />
);

export const HorizontalScrolling = () => (
  <div style={{ maxWidth: '320px' }}>
    <SecondaryNavigation
      navItems={[
        {
          label: <FormattedMessage id="VeryLongLabel" />,
          href: 'https://wealthsimple.com',
        },
        ...navItems,
      ]}
    />
  </div>
);
