// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { Link } from './index';
import { Span } from '../span';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './LINK.mkd';

storiesOf('Core/Text/Link', module)
  .addDecorator(withInfo(configDocs(docs, Link)))

  .add('normal', () => (
    <Link href="https://wealthsimple.com" target="_blank">
      Wealthsimple
    </Link>
  ))
  .add('custom colour', () => (
    <Link
      href="https://wealthsimple.com"
      colorName="brand-secondary-base"
      target="_blank"
    >
      Wealthsimple
    </Link>
  ))
  .add('custom font size', () => (
    <>
      <Link href="https://wealthsimple.com" fontSize="f5" target="_blank">
        Wealthsimple with f5 Size
      </Link>
      <br />
      <Link href="https://wealthsimple.com" fontSize="f3" target="_blank">
        Wealthsimple with f3 Size
      </Link>
    </>
  ))
  .add('custom colour with nested <Span />', () => (
    <Link
      href="https://wealthsimple.com"
      colorName="brand-secondary-base"
      target="_blank"
    >
      <Span fontSize="f3" bold italic>
        Wealthsimple
      </Span>
    </Link>
  ))
  .add('link button', () => (
    <>
      <Link href="https://google.com">{'<a /> element'}</Link>
      <br />
      <br />
      <Link onClick={action('clicked')}>{'<button /> element'}</Link>
    </>
  ))
  .add('link with href and onClick', () => (
    <Link
      href="https://wealthsimple.com"
      onClick={() =>
        alert('link clicked. After click OK you will navigate to wealthsimple')
      }
    >
      Click me
    </Link>
  ));
