// @flow strict

import merge from 'lodash/merge';

import {
  colorTextPrimary,
  colorTextSecondary,
} from '../../styles/variables/_color';

import {
  bodySmall,
  buttonTextExtraSmall,
  formLabelSmall,
  underline,
} from './typography';


export const deepMerge = <T: {}>(
  obj1?: $Shape<T>,
  obj2?: $Shape<T>,
  ...args: Array<?$Shape<T>>
): T =>
  // {} is used here to ensure obj1 is not modified
    merge({}, obj1, obj2, ...args);

export const rightLineLegendColumn = {
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'middle',
  itemMarginBottom: 12,
  symbolPadding: 4,
  symbolWidth: 16,
  width: '40%',
};

export const bottomLegendRow = {
  layout: 'horizontal',
  align: 'center',
  verticalAlign: 'bottom',
  itemDistance: 20,
  symbolPadding: 4,
  symbolWidth: 16,
};

export const yAxisTitleStyle = {
  ...bodySmall,
  color: colorTextSecondary,
};

export const xAxisTitleStyle = {
  ...bodySmall,
  color: colorTextSecondary,
};

export const yAxisLabelStyle = {
  ...formLabelSmall,
};

export const xAxisLabelStyle = {
  ...buttonTextExtraSmall,
};

export const activeLabelStyle = {
  ...buttonTextExtraSmall,
  ...underline,
  color: colorTextPrimary,
  fill: colorTextPrimary,
};