import { runInAction } from 'mobx';
import { merge } from '../utils/obj/merge';
import { getGutterStyles } from './getGutterStyles';

/**
 * helper function to accept overwrite styles and merge with base styles
 * @param componentStyles
 * @param overwrites
 * @returns
 */
export function mergeStyles<T>(
  defaultStyles: T,
  overwrites?: T,
  gutters?: number | string
): T {
  let styles = defaultStyles;
  runInAction(() => {
    const gutterStyles = getGutterStyles(gutters);
    styles = merge({}, defaultStyles, overwrites || {}, gutterStyles || {});
  });

  return styles;
}