// @flow
import type { ModalProps } from './modal.proptypes';
import type { ThemeProps } from '../../../types';
import type { BreakPoint } from '../../../breakpoints';
import { fadeColor } from '../../../utils/color';

import { getPaletteColor } from '../../../mixins/branding';

export const getBackgroundColor = ({ theme }: ThemeProps) =>
  fadeColor(getPaletteColor('background')({ theme }), 0.15);

export const getContentBackground = ({ theme }: ThemeProps) =>
  getPaletteColor('white')({ theme });

export const getContentBoxShadowColor = ({ theme }: ThemeProps) =>
  fadeColor(getPaletteColor('greyscale-black')({ theme }), 0.95);

export const getBorderColor = ({ theme }: ThemeProps) =>
  getPaletteColor('greyscale-light')({ theme });

export const getModalWidth = ({ size }: ModalProps) => {
  switch (size) {
    case 'sm':
      return '300px';
    case 'md':
      return '450px';
    case 'lg':
      return '600px';
    case 'xl':
      return '840px';
    default:
      return '600px';
  }
};

export const getModalHeaderPadding = ({ size }: ModalProps) => {
  switch (size) {
    case 'sm':
    case 'md':
    case 'lg':
      return '60px';
    case 'xl':
      return '40px';
    default:
      return '60px';
  }
};

export const getMargin = ({ breakPoint }: { breakPoint: BreakPoint }) => {
  if (breakPoint === 'sm') {
    return '5vh auto';
  }

  return '15vh auto';
};
