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

const RowContainer = styled(Box)`
  border: dashed 1px ${getPaletteColor('greyscale-dark')};
  width: 50%;
`;

/**
 * A utility that lets you quickly generate stories that excercise the stackee props
 * for a given component.
 *
 * This is especially useful for Eyebot regression checking.
 */

export type StackeeCheckerProps<ComponentProps> = {|
  Component: ComponentType<ComponentProps>,
  ...ComponentProps,
|};
export const StackeeChecker = <ComponentProps>({
  Component,
  ...props
}: StackeeCheckerProps<ComponentProps>) => (
  <>
    <code>shrink: 1, grow: 1, basis: 300</code>
    <br />
    <code>shrink: 2, grow: 2, basis: 300</code>
    <br />
    <code>shrink: 3, grow: 3, basis: 300</code>
    <br />

    <RowContainer stacked="row">
      <Component
        {...props}
        shrink={1}
        grow={1}
        basis={300}
        title="shrink={1} grow={1} basis={300}"
      />
      <Component
        {...props}
        shrink={2}
        grow={2}
        basis={300}
        title="shrink={2} grow={2} basis={300}"
      />
      <Component
        {...props}
        shrink={3}
        grow={3}
        basis={300}
        title="shrink={3} grow={3} basis={300}"
      />
    </RowContainer>
  </>
);
