// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { UnstyledButton } from './index';
import { Box } from '../../../primitives/index';
import { withDocs } from '../../../../.storybook/with-docs';
import docs from './UNSTYLED_BUTTON.mkd';
import { Span } from '../../typography/span';

storiesOf('Core/Behaviors/UnstyledButton', module)
  .add(
    'normal',
    withDocs(docs)(() => (
      <UnstyledButton onClick={action('unstyled button clicked')}>
        I am an unstyled button.
      </UnstyledButton>
    )),
  )
  .add(
    'border radius',
    withDocs(docs)(() => (
      <>
        <UnstyledButton
          borderRadius={10}
          onClick={action('unstyled button clicked')}
        >
          With 10px border radius
        </UnstyledButton>
        <br />
        <UnstyledButton
          borderRadius={40}
          onClick={action('unstyled button clicked')}
        >
          With 40px border radius
        </UnstyledButton>
      </>
    )),
  )
  .add(
    'focus styling',
    withDocs(docs)(() => (
      <>
        <UnstyledButton onClick={action('unstyled button clicked')}>
          I am an unstyled button with a regular focus state.
        </UnstyledButton>
        <br />
        <UnstyledButton insetFocus onClick={action('unstyled button clicked')}>
          I am an unstyled button with a inset focus state.
        </UnstyledButton>
      </>
    )),
  )
  .add(
    'focus styling with dark backgrounds',
    withDocs(docs)(() => (
      <Box colorName="brand-secondary-dark" spacing={['p2']}>
        <UnstyledButton isDarkMode onClick={action('unstyled button clicked')}>
          <Span colorName="background">
            I am an unstyled button with a dark mode focus state.
          </Span>
        </UnstyledButton>
      </Box>
    )),
  );
