// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { UnstyledButton } from './unstyled-button.component';
import type { UnstyledButtonProps } from './unstyled-button.proptypes';
import docs from './unstyled-button.mdx';
import { Box } from '../../../primitives/index';
import { Span } from '../../typography/span';

export default {
  component: UnstyledButton,
  title: 'Unstyled Button',
  parameters: {
    fileName: __filename,
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS: UnstyledButtonProps = {
  onClick: action('unstyled button clicked'),
};

export const Default = () => (
  <UnstyledButton {...DEFAULT_PROPS}>I am an unstyled button.</UnstyledButton>
);

export const BorderRadius = () => (
  <>
    <UnstyledButton {...DEFAULT_PROPS} borderRadius={10}>
      With 10px border radius
    </UnstyledButton>
    <br />
    <UnstyledButton {...DEFAULT_PROPS} borderRadius={40}>
      With 40px border radius
    </UnstyledButton>
  </>
);

export const FocusStyles = () => (
  <>
    <UnstyledButton {...DEFAULT_PROPS}>
      I am an unstyled button with a regular focus state.
    </UnstyledButton>
    <br />
    <UnstyledButton {...DEFAULT_PROPS} insetFocus>
      I am an unstyled button with a inset focus state.
    </UnstyledButton>
  </>
);

export const DarkBackgroundFocusStyles = () => (
  <Box colorName="brand-secondary-dark" spacing={['p2']}>
    <UnstyledButton {...DEFAULT_PROPS} isDarkMode>
      <Span colorName="background">
        I am an unstyled button with a dark mode focus state.
      </Span>
    </UnstyledButton>
  </Box>
);
