import React from 'react';

import { ComponentStory, ComponentMeta, ArgTypes } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import PageTitle from './page-title';
import { LinkProps } from '../@navigation/link';
import { PageTitleProps } from './types';

const handleLinkClick: LinkProps['onClick'] = e => {
  e.preventDefault();
  action('link click');
};

const links: PageTitleProps['links'] = [
  {
    href: '#0',
    id: '0',
    text: 'Some link',
    onClick: handleLinkClick
  },
  {
    href: '#1',
    id: '1',
    text: 'Another link',
    onClick: handleLinkClick
  },
  {
    href: '#2',
    id: '2',
    text: 'Another Another link',
    onClick: handleLinkClick
  },
  {
    href: '#3',
    id: '3',
    text: 'Other Another Another link',
    onClick: handleLinkClick
  }
];

const argTypes: Partial<ArgTypes<PageTitleProps>> = {};
const args: PageTitleProps = {
  links,
  title: 'Dropdown Links',
  subtitle: 'Add, remove, and manage team members in your workspace',
  menuButtonText: 'Learn more'
};

export default {
  title: 'PageTitle',
  component: PageTitle,
  argTypes,
  args
} as ComponentMeta<typeof PageTitle>;

export const Primary: ComponentStory<typeof PageTitle> = args => <PageTitle {...args} />;
export const LinkWithHref = Primary.bind({});
LinkWithHref.args = {
  href: 'https://www.perimeter81.com',
  title: 'Link with Href',
  subtitle: 'To learn more about using perimeter',
  menuButtonText: 'Click here'
};
export const LinkWithOnClick = Primary.bind({});
LinkWithOnClick.args = {
  onClick: () => alert('Click Handler'),
  title: 'Link with onClick',
  subtitle: 'To open a popup, please: ',
  menuButtonText: 'Click here'
};