// @flow
import type { StatelessFunctionalComponent } from 'react';
import styled from 'styled-components';
import type { BoxProps } from './box.proptypes';
import { getSpacingRules } from '../../mixins/spacing';
import { getStackedRules } from '../../mixins/stacking';
import { getStackeeRules } from '../../mixins/stackee';
import { getPaletteColor, type BrandProps } from '../../mixins/branding';
import type { ThemeProps } from '../../types';
import { getHideRules } from '../../mixins/hide';

const style = ({
  theme,
  colorName,
}: {|
  ...BoxProps,
  ...ThemeProps,
  ...BrandProps,
|}) => {
  const backgroundRules = () =>
    colorName ? { background: getPaletteColor(colorName)({ theme }) } : {};

  return {
    ...backgroundRules(),
  };
};

export const Box: StatelessFunctionalComponent<BoxProps> = styled.div
  .attrs((props) => ({
    style: style(props),
  }))
  .withConfig({
    shouldForwardProp: (prop, defaultValidatorFn) =>
      ![
        'stacked',
        'align',
        'justify',
        'wrap',
        'grow',
        'shrink',
        'basis',
        'spacing',
        'colorName',
        'hide',
      ].includes(prop) && defaultValidatorFn(prop),
  })`
  &&& {
    ${getSpacingRules}
  }
  ${getStackedRules};
  ${getStackeeRules};
  ${getHideRules};
`;

Box.displayName = 'Box';
