// @flow
import type { ThemeProps } from '../../../types';
import type { TypographyProps } from '../../../mixins/typography';
import {
  getFontSize,
  getFontFamily as _getFontFamily,
} from '../../../mixins/typography';
import { getPaletteColor } from '../../../mixins/branding';

type Props = {| ...ThemeProps, ...TypographyProps, href: string |};

export const getMobileFontSize = ({ theme }: Props) =>
  getFontSize({ theme, fontSize: 'f4' });

export const getDesktopFontSize = ({ theme }: Props) =>
  getFontSize({ theme, fontSize: 'f5' });

export const getFontFamily = ({ theme }: Props) =>
  _getFontFamily({ theme, face: 'sans' });

export const getFontColor = ({ theme, href }: Props) =>
  window.location.pathname === href
    ? getPaletteColor('greyscale-black')({ theme })
    : getPaletteColor('greyscale-dark')({ theme });

export const getHoverFontColor = ({ theme }: Props) =>
  getPaletteColor('greyscale-black')({ theme });
