// @flow
import React from 'react';
import styled from 'styled-components';
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';
import { getPaletteColor } from '../../../mixins/branding';
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 { StackedChecker } from '../../../mixins/stacking/story-support/stacked-checker';

export default {
  component: UnstyledButton,
  title: 'Buttons/Unstyled Button',
  parameters: {
    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-fg" spacing={['p2']}>
    <UnstyledButton {...DEFAULT_PROPS} isDarkMode>
      <Span colorName="brand-secondary-bg">
        I am an unstyled button with a dark mode focus state.
      </Span>
    </UnstyledButton>
  </Box>
);

const BorderedUnstyledButton = styled(UnstyledButton)`
  background: ${getPaletteColor('brand-secondary-bg')};
  border: solid ${getPaletteColor('brand-secondary-fg')} 1px;
  color: ${getPaletteColor('brand-secondary-fg')};
`;
export const MixinsSpacing = () => (
  <>
    <MarginChecker Component={BorderedUnstyledButton} {...DEFAULT_PROPS}>
      Click me
    </MarginChecker>
    <PaddingChecker Component={BorderedUnstyledButton} {...DEFAULT_PROPS}>
      Click me
    </PaddingChecker>
  </>
);

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

export const MixinsStacked = () => (
  <StackedChecker
    Component={BorderedUnstyledButton}
    {...DEFAULT_PROPS}
    spacing="p1"
  />
);
