// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { Button } from './button.component';
import type { ButtonProps } from './button.proptypes';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';

import docs from './button.mdx';

export default {
  component: Button,
  title: 'Components/Actions/Primary Button',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS_CLICK: ButtonProps = {
  onClick: action('clicked'),
  size: 'md',
};

const DEFAULT_PROPS_HREF: ButtonProps = {
  href: 'https://google.com',
  size: 'md',
};

export const AsLink = () => (
  <Button {...DEFAULT_PROPS_HREF}>Go to Google</Button>
);

export const AsButton = () => (
  <Button {...DEFAULT_PROPS_CLICK}>Click me</Button>
);

export const AsButtonLoading = () => (
  <Button {...DEFAULT_PROPS_CLICK} isLoading>
    Click me
  </Button>
);

export const AsButtonDisabled = () => (
  <Button {...DEFAULT_PROPS_CLICK} disabled>
    Click me
  </Button>
);

export const AsLinkSm = () => (
  <Button {...DEFAULT_PROPS_HREF} size="sm">
    Go to Google
  </Button>
);

export const AsButtonSm = () => (
  <Button {...DEFAULT_PROPS_CLICK} size="sm">
    Click me
  </Button>
);

export const AsButtonLoadingSm = () => (
  <Button {...DEFAULT_PROPS_CLICK} size="sm" isLoading>
    Click me
  </Button>
);

export const AsButtonDisabledSm = () => (
  <Button {...DEFAULT_PROPS_CLICK} size="sm" disabled>
    Click me
  </Button>
);

export const MixinsSpacing = () => (
  <>
    <MarginChecker Component={Button} {...DEFAULT_PROPS_CLICK}>
      Click me
    </MarginChecker>
    <PaddingChecker Component={Button} {...DEFAULT_PROPS_CLICK}>
      Click me
    </PaddingChecker>
  </>
);

export const MixinsStackee = () => (
  <StackeeChecker Component={Button} {...DEFAULT_PROPS_CLICK}>
    Click me
  </StackeeChecker>
);
