import Typography, { TypographyOptions } from 'typography';

import { colors } from 'utils/theme';

import config from './config.json';

const options: TypographyOptions = {
  baseFontSize: `${config.bodyFont.baseFontSize}px`,
  baseLineHeight: 2,
  bodyColor: colors.black,
  blockMarginBottom: .4,
  bodyFontFamily: [
    config.bodyFont.fontName,
    'Arial',
    'sans-serif'
  ],
  boldWeight: 600,
  headerFontFamily: [
    config.headingFont.fontName,
    'Arial',
    'sans-serif'
  ],
  googleFonts: [
    {
      name: config.bodyFont.fontName,
      styles: config.bodyFont.fontVariants.split(',')
    },
    {
      name: config.headingFont.fontName,
      styles: config.headingFont.fontVariants.split(',')
    }
  ],
  includeNormalize: true,
  overrideStyles: (): object => {
    return {
      'form, fieldSet, img, ul, li, figure': {
        margin: 0
      },
      'fieldset': {
        border: 'none'
      },
      'a:-webkit-any-link': {
        textDecoration: 'none'
      }
    };
  }
};

const typography = new Typography(options);

// Hot reload typography in development.
if (process.env.NODE_ENV === 'development') {
  typography.injectStyles();
}

export default typography;
export const rhythm = typography.rhythm;
export const scale = typography.scale;