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

storiesOf('Core/Text/Link', module)
  .add(
    'normal',
    withDocs(docs)(() => (
      <Link href="https://wealthsimple.com" target="_blank">
        Wealthsimple
      </Link>
    )),
  )
  .add(
    'custom colour',
    withDocs(docs)(() => (
      <Link
        href="https://wealthsimple.com"
        colorName="brand-secondary-base"
        target="_blank"
      >
        Wealthsimple
      </Link>
    )),
  )
  .add(
    'custom font size',
    withDocs(docs)(() => (
      <>
        <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 />',
    withDocs(docs, [Span])(() => (
      <Link
        href="https://wealthsimple.com"
        colorName="brand-secondary-base"
        target="_blank"
      >
        <Span fontSize="f3" bold italic>
          Wealthsimple
        </Span>
      </Link>
    )),
  )
  .add(
    'link button',
    withDocs(docs)(() => (
      <>
        <Link href="https://google.com">{'<a /> element'}</Link>
        <br />
        <br />
        <Link onClick={action('clicked')}>{'<button /> element'}</Link>
      </>
    )),
  );
