// @flow
import type { StackedProps } from './stacking.proptypes';

const JUSTIFY_CONTENT_MAP = {
  start: 'flex-start',
  end: 'flex-end',
  center: 'center',
  'space-between': 'space-between',
};

const DEFAULT_ALIGN = 'stretch';
const DEFAULT_JUSTIFY = 'flex-start';

const ALIGN_CONTENT_MAP = {
  start: 'flex-start',
  end: 'flex-end',
  center: 'center',
  stretch: 'stretch',
};

type StackedRules = {|
  flexDirection?: 'column' | 'row',
  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between',
  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch',
|};

export const getStackedRules = ({
  stacked,
  justify,
  align,
}: StackedProps): StackedRules =>
  stacked
    ? {
        flexDirection: stacked === 'column' ? 'column' : 'row',
        justifyContent: justify
          ? JUSTIFY_CONTENT_MAP[justify]
          : DEFAULT_JUSTIFY,
        alignItems: align ? ALIGN_CONTENT_MAP[align] : DEFAULT_ALIGN,
      }
    : Object.freeze({});

export const getStackedDisplay = ({ stacked }: StackedProps) =>
  stacked ? 'flex' : undefined;
