// @flow
import { css } from 'styled-components';
import type { ThemeProps } from '../../types';
import type { TypographyProps } from './typography.proptypes';

const tabularStyles = css`
  font-feature-settings: 'tnum';
  font-kerning: none;
`;

export const getTextAlign = ({ align }: TypographyProps) => align;
export const getFontStyle = ({ italic }: TypographyProps) =>
  italic ? 'italic' : undefined;
export const getTextDecoration = ({ underlined }: TypographyProps) =>
  underlined ? 'underline' : undefined;
export const getTextTransform = ({ casing }: TypographyProps) => casing;

export const getFontSize = ({
  theme,
  fontSize = 'f2',
}: ThemeProps & TypographyProps) => theme.typescale[fontSize];

export const getFontFamily = ({
  theme,
  face = 'sans',
}: ThemeProps & TypographyProps) => theme.fonts[face];

export const getFontWeight = ({ bold = false }: TypographyProps) =>
  bold ? '700' : '400';

export const getTabularStyles = ({ tabular = false }: TypographyProps) =>
  tabular ? tabularStyles : '';
