// @flow
import React, { type ComponentType } from 'react';
import styled from 'styled-components';
import { Box } from './box.component';
import { type BoxProps } from './box.proptypes';
import { Span } from '../../core/typography';
import { getPaletteColor } from '../../mixins/branding';
import { MarginChecker } from '../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../mixins/spacing/story-support/padding-checker';
import { StackedChecker } from '../../mixins/stacking/story-support/stacked-checker';
import { StackeeChecker } from '../../mixins/stackee/story-support/stackee-checker';
import docs from './box.mdx';

export default {
  component: Box,
  title: 'Components/Layout Containers/Box',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const BorderBox: ComponentType<BoxProps> = styled(Box)`
  border: dotted 1px ${getPaletteColor('greyscale-dark')};
`;

export const Preview = () => (
  <BorderBox stacked="row" align="stretch" justify="end" spacing="p2">
    <Box colorName="brand-secondary-bg" spacing={['p3', 'm1']} />
    <Box colorName="brand-secondary-bg" spacing={['p3', 'm1']} />
    <Box colorName="brand-secondary-bg" spacing={['p3', 'm1']} />
  </BorderBox>
);

export const BackgroundColor = () => (
  <Box colorName="brand-primary-fg">
    <Span colorName="brand-primary-bg">
      I am a box with colorName = brand-primary-fg
    </Span>
  </Box>
);

export const MixinsSpacing = () => (
  <>
    <MarginChecker Component={Box} colorName="brand-secondary-bg">
      Box
    </MarginChecker>
    <PaddingChecker Component={Box} colorName="brand-secondary-bg">
      Box
    </PaddingChecker>
  </>
);

export const MixinsStacked = () => (
  <StackedChecker colorName="brand-secondary-bg" Component={Box} />
);

export const MixinsStackee = () => (
  <StackeeChecker colorName="brand-secondary-bg" Component={Box}>
    Box
  </StackeeChecker>
);
