import React from 'react'
import {StyleSheet, Text as RNText} from 'react-native'

import * as Colors from './PyColors'

export function Text ({style, ...props}) { // eslint-disable-line
  return <RNText style={[styles.font, style]} {...props} />
}

export function Heading1 ({style, ...props}) { // eslint-disable-line
  return <RNText style={[styles.font, styles.h1, style]} {...props} />
}

export function Heading2 ({style, ...props}) { // eslint-disable-line
  return <RNText style={[styles.font, styles.h2, style]} {...props} />
}

export function Heading3 ({style, ...props}) { // eslint-disable-line
  return <RNText style={[styles.font, styles.h3, style]} {...props} />
}

export function Heading4 ({style, ...props}) { // eslint-disable-line
  return <RNText style={[styles.font, styles.h4, style]} {...props} />
}

export function Heading5 ({style, ...props}) { // eslint-disable-line
  return <RNText style={[styles.font, styles.h5, style]} {...props} />
}

export function Paragraph ({style, ...props}) { // eslint-disable-line
  return <RNText style={[styles.font, styles.p, style]} {...props} />
}

export function SmallText ({style, ...props}) { // eslint-disable-line
  return <RNText style={[styles.font, styles.small, style]} {...props} />
}

export function LargeText ({style, ...props}) { // eslint-disable-line
  return <RNText style={[styles.font, styles.large, style]} {...props} />
}

function getHeadingStyles ({prefix = 'heading', otherStyles}) {
  const styles = {}
  ;[1, 2, 3, 4, 5, 6].forEach(i => {
    const fontSize = 28 - 2 * i
    const lineHeight = Math.round(fontSize * 1.375)
    const fontWeight = 'bold'
    styles[`${prefix}${i}`] = {fontSize, lineHeight, fontWeight, ...otherStyles}
  })
  return styles
}

const headingStyles = getHeadingStyles({prefix: 'h'})

const styles = StyleSheet.create({
  ...headingStyles,
  font: {
    color: Colors.DARK_TEXT
  },
  p: {
    fontSize: 15,
    lineHeight: 24
  },
  small: {
    fontSize: 12,
    lineHeight: 17
  },
  large: {
    fontSize: 18
  }
})

@@ -27,16 +27,28 @@
 import %7B
+Dimensions, 
 StyleShe
@@ -1415,16 +1415,133 @@
 %7D /%3E%0A%7D%0A%0A
+const scale = Dimensions.get('window').width / 375%0A%0Afunction normalize (size) %7B%0A  return Math.round(scale * size)%0A%7D%0A%0A
 function
@@ -1674,16 +1674,26 @@
 tSize = 
+normalize(
 28 - 2 *
@@ -1694,16 +1694,17 @@
  - 2 * i
+)
 %0A    con
@@ -2061,10 +2061,21 @@
 ze: 
+normalize(
 15
+)
 ,%0A  
@@ -2092,10 +2092,21 @@
 ht: 
+normalize(
 24
+)
 %0A  %7D
@@ -2136,10 +2136,21 @@
 ze: 
+normalize(
 12
+)
 ,%0A  
@@ -2167,10 +2167,21 @@
 ht: 
+normalize(
 17
+)
 %0A  %7D
@@ -2211,10 +2211,52 @@
 ze: 
-18
+normalize(18),%0A    lineHeight: normalize(25)
 %0A  %7D

normalize font-size