import Body from '../body/Body';
import { Typography } from '../common';
import Title from '../title/Title';

import SentimentSurface from '../sentimentSurface';
import Link from '.';
import { createSandboxStory, globalScope } from '../../.storybook/components/sandbox/SandboxEditor';

export default {
  component: Link,
  title: 'Typography/Link',
};

export const Sandbox = createSandboxStory({
  code: `<Link type="link-default" href="#">
  Learn more about international transfers
</Link>`,
  scope: { ...globalScope, Link },
});

export const Basic = () => {
  return (
    <>
      <Title type={Typography.TITLE_SCREEN} className="m-t-3">
        Standalone examples of links
      </Title>
      <Link href="#" target="_blank">
        Default link
      </Link>
      <Link type={Typography.LINK_DEFAULT} target="_blank" className="m-t-3" href="#">
        Default link
      </Link>
      <Link type={Typography.LINK_LARGE} target="_blank" className="m-t-3" href="#">
        Large link
      </Link>
      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
      <Link className="m-t-3" onClick={() => console.log('click link')}>
        button as Link
      </Link>
      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
      <Link
        className="m-t-3"
        type={Typography.LINK_LARGE}
        onClick={() => console.log('click link')}
      >
        button as Link
      </Link>

      <Title type={Typography.TITLE_SCREEN} className="m-t-3">
        Disabled links
      </Title>
      <Link href="#" disabled className="m-t-3">
        Disabled link
      </Link>
      <Link type={Typography.LINK_LARGE} href="#" disabled className="m-t-3">
        Disabled large link
      </Link>
      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
      <Link className="m-t-3" disabled onClick={() => console.log('click disabled button')}>
        Disabled button as Link
      </Link>
      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
      <Link
        className="m-t-3"
        type={Typography.LINK_LARGE}
        disabled
        onClick={() => console.log('click disabled button')}
      >
        Disabled button as Link (large)
      </Link>

      <Title type={Typography.TITLE_SCREEN} className="m-t-3">
        Links via <code>{'<Link />'}</code> component in all types of body copy
      </Title>
      <Body type={Typography.BODY_LARGE_BOLD} className="m-t-3">
        We&apos;re building the world&apos;s{' '}
        <Link href="#" target="_blank">
          most international account
        </Link>
        . We&apos;re building the world&apos;s most international account
      </Body>
      <Body type={Typography.BODY_LARGE} className="m-t-3">
        We&apos;re building the world&apos;s{' '}
        <Link href="#" target="_blank">
          most international account
        </Link>
        . We&apos;re building the world&apos;s most international account
      </Body>
      <Body type={Typography.BODY_DEFAULT_BOLD} className="m-t-3">
        We&apos;re building the world&apos;s{' '}
        <Link href="#" target="_blank">
          most international account
        </Link>
        . We&apos;re building the world&apos;s most international account
      </Body>
      <Body type={Typography.BODY_DEFAULT} className="m-t-3">
        We&apos;re building the world&apos;s{' '}
        <Link href="#" target="_blank">
          most international account
        </Link>
        . We&apos;re building the world&apos;s most international account
      </Body>

      <Title type={Typography.TITLE_SCREEN} className="m-t-3">
        Disabled links in body copy
      </Title>
      <Body type={Typography.BODY_LARGE_BOLD} className="m-t-3">
        We&apos;re building the world&apos;s{' '}
        <Link href="#" disabled>
          most international account
        </Link>
        . We&apos;re building the world&apos;s most international account
      </Body>
      <Body type={Typography.BODY_LARGE} className="m-t-3">
        We&apos;re building the world&apos;s{' '}
        <Link href="#" disabled>
          most international account
        </Link>
        . We&apos;re building the world&apos;s most international account
      </Body>
      <Body type={Typography.BODY_DEFAULT_BOLD} className="m-t-3">
        We&apos;re building the world&apos;s{' '}
        <Link href="#" disabled>
          most international account
        </Link>
        . We&apos;re building the world&apos;s most international account
      </Body>
      <Body type={Typography.BODY_DEFAULT} className="m-t-3">
        We&apos;re building the world&apos;s{' '}
        <Link href="#" disabled>
          most international account
        </Link>
        . We&apos;re building the world&apos;s most international account
      </Body>

      <Title type={Typography.TITLE_SCREEN} className="m-t-3">
        Links via <code>{'<a>'}</code> tag in all types of body copy
      </Title>
      <Body type={Typography.BODY_LARGE_BOLD} className="m-t-3">
        We&apos;re building the world&apos;s{' '}
        <a href="#" target="_blank">
          most international account
        </a>
        . We&apos;re building the world&apos;s most international account
      </Body>
      <Body type={Typography.BODY_LARGE} className="m-t-3">
        We&apos;re building the world&apos;s{' '}
        <a href="#" target="_blank">
          most international account
        </a>
        . We&apos;re building the world&apos;s most international account
      </Body>
      <Body type={Typography.BODY_DEFAULT_BOLD} className="m-t-3">
        We&apos;re building the world&apos;s{' '}
        <a href="#" target="_blank">
          most international account
        </a>
        . We&apos;re building the world&apos;s most international account
      </Body>
      <Body type={Typography.BODY_DEFAULT} className="m-t-3">
        We&apos;re building the world&apos;s{' '}
        <a href="#" target="_blank">
          most international account
        </a>
        . We&apos;re building the world&apos;s most international account
      </Body>
    </>
  );
};

/**
 * `Link` is sentiment-aware and will automatically adjust its colours if wrapped inside
 * the [SentimentSurface](?path=/docs/foundations-sentimentsurface--docs) component
 */
export const SentimentAwareness = function Render() {
  return (['success', 'warning', 'negative'] as const).map((sentiment) => (
    <SentimentSurface key={sentiment} sentiment={sentiment} className="p-a-1">
      {'Some text with an '}
      <Link href="#">inline link</Link>
      {' adjusted to match the current colour scheme. It also works with '}
      <Link href="#" target="_blank">
        external
      </Link>
      {' and '}
      <Link href="#" target="_blank" disabled>
        disabled links
      </Link>
      .
    </SentimentSurface>
  ));
};
SentimentAwareness.parameters = {
  docs: {
    source: { type: 'dynamic' },
  },
};
