// @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',
};

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

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