import React, { Component, PropTypes } from 'react';
import theme from '../theme';
import { StyleSheet, Text } from 'react-native';

const styles = StyleSheet.create({
  text: {
    color: theme.textColor,
    fontFamily: theme.fontFamily,
    fontSize: theme.fontSize,
  },
});

// Normalize multiline strings because Text component preserves spaces.
const normalizeMultilineString = message => message.replace(/ +/g, ' ').trim();

export default class AppText extends Component {

  static propTypes = {
    children: PropTypes.node,
    style: Text.propTypes.style,
  };

  constructor() {
    super();
    this.onTextRef = this.onTextRef.bind(this);
  }

  onTextRef(text) {
    this.text = text;
  }

  setNativeProps(nativeProps) {
    this.text.setNativeProps(nativeProps);
  }

  render() {
    const { children, style } = this.props;
    const fontSize = (style && style.fontSize) || theme.fontSize;
    const lineHeight = fontSize * theme.lineHeight;

    return (
      <Text
        {...this.props}
        ref={this.onTextRef}
        style={[styles.text, style, { lineHeight }]}
      >
        {typeof children === 'string'
          ? normalizeMultilineString(children)
          : children
        }
      </Text>
    );
  }

}

@@ -170,16 +170,69 @@
  text: %7B
+ // eslint-disable-line react-native/no-unused-styles
 %0A    col
@@ -316,16 +316,67 @@
 ntSize,%0A
+    lineHeight: theme.fontSize * theme.lineHeight,%0A
   %7D,%0A%7D);
@@ -889,14 +889,47 @@
 %0A%0A  
-render
+getTextStyleWithMaybeComputedLineHeight
 () %7B
@@ -944,18 +944,8 @@
 st %7B
- children,
  sty
@@ -971,15 +971,71 @@
     
-const f
+if (!style) %7B%0A      return styles.text;%0A    %7D%0A    const customF
 ontS
@@ -1044,23 +1044,33 @@
 e = 
-(s
+S
 tyle
- && 
+Sheet.flatten(
 style
+)
 .fon
@@ -1078,28 +1078,95 @@
 Size
-) %7C%7C theme.fontSize;
+;%0A    if (!Number.isInteger(customFontSize)) %7B%0A      return %5Bstyles.text, style%5D;%0A    %7D
 %0A   
@@ -1185,17 +1185,23 @@
 eight = 
-f
+customF
 ontSize 
@@ -1220,17 +1220,16 @@
 Height;%0A
-%0A
     retu
@@ -1231,16 +1231,191 @@
  return 
+%5Bstyles.text, style, %7B lineHeight %7D%5D;%0A  %7D%0A%0A  render() %7B%0A    const %7B children %7D = this.props;%0A    const textStyle = this.getTextStyleWithMaybeComputedLineHeight();%0A%0A    return 
 (%0A      
@@ -1419,24 +1419,16 @@
    %3CText
-%0A       
  %7B...thi
@@ -1435,24 +1435,16 @@
 s.props%7D
-%0A       
  ref=%7Bth
@@ -1460,68 +1460,26 @@
 Ref%7D
-%0A        style=%7B%5Bstyles.
+ style=%7B
 text
-, s
+S
 tyle
-, %7B lineHeight %7D%5D%7D%0A      
+%7D
 %3E%0A  

Fix native Text computed lineHeight