// @flow
import React, { type ComponentType } from 'react';
import styled from 'styled-components';
import { Box } from '../../../primitives';
import { getPaletteColor } from '../../branding';

const ChildBox = styled(Box)`
  background: ${getPaletteColor('brand-secondary-fg')};
  border: solid ${getPaletteColor('brand-secondary-bg')} 1px;
  color: ${getPaletteColor('brand-secondary-bg')};
  height: 25px;
  width: 25px;
`;

/**
 * A utility that lets you quickly generate stories that excercise the margin spacing props.
 *
 * This is especially useful for Eyebot regression checking.
 */
export type StackedCheckerProps<ComponentProps> = {|
  Component: ComponentType<ComponentProps>,
  ...ComponentProps,
|};
export const StackedChecker = <ComponentProps>({
  Component,
  ...props
}: StackedCheckerProps<ComponentProps>) => (
  <Box stacked="row" wrap>
    <Box grow={1}>
      <code>row</code>
      <Component stacked="row" {...props}>
        <ChildBox>1</ChildBox>
        <ChildBox>2</ChildBox>
        <ChildBox>3</ChildBox>
      </Component>
    </Box>
    <Box grow={1}>
      <code>column</code>
      <Component stacked="column" {...props}>
        <ChildBox>1</ChildBox>
        <ChildBox>2</ChildBox>
        <ChildBox>3</ChildBox>
      </Component>
    </Box>
  </Box>
);
