import PropTypes from 'prop-types';
import React from 'react';
import {
  Platform,
  StyleSheet,
  TextInput,
} from 'react-native';

export default class Composer extends React.Component {
  onChange(e) {
    const contentSize = e.nativeEvent.contentSize;
    if (!this.contentSize) {
      this.contentSize = contentSize;
      this.props.onInputSizeChanged(this.contentSize);
    } else if (this.contentSize.width !== contentSize.width || this.contentSize.height !== contentSize.height) {
      this.contentSize = contentSize;
      this.props.onInputSizeChanged(this.contentSize);
    }
  }

  onChangeText(text) {
    this.props.onTextChanged(text);
  }

  render() {
    return (
      <TextInput
        placeholder={this.props.placeholder}
        placeholderTextColor={this.props.placeholderTextColor}
        multiline={this.props.multiline}

        onContentSizeChange={(e) => this.onChange(e)}
        onChangeText={text => this.onChangeText(text)}

        style={[styles.textInput, this.props.textInputStyle, {height: this.props.composerHeight}]}

        value={this.props.text}
        accessibilityLabel={this.props.text || this.props.placeholder}
        enablesReturnKeyAutomatically={true}
        underlineColorAndroid="transparent"
        {...this.props.textInputProps}
      />
    );
  }
}

const styles = StyleSheet.create({
  textInput: {
    flex: 1,
    marginLeft: 10,
    fontSize: 16,
    lineHeight: 16,
    marginTop: Platform.select({
      ios: 6,
      android: 0,
    }),
    marginBottom: Platform.select({
      ios: 5,
      android: 3,
    }),
  },
});

Composer.defaultProps = {
  onChange: () => {
  },
  composerHeight: Platform.select({
    ios: 33,
    android: 41,
  }), // TODO SHARE with GiftedChat.js and tests
  text: '',
  placeholderTextColor: '#b2b2b2',
  textInputProps: null,
  multiline: true,
  textInputStyle: {},
  onTextChanged: () => {
  },
  onInputSizeChanged: () => {
  },
};

Composer.propTypes = {
  onChange: PropTypes.func,
  composerHeight: PropTypes.number,
  text: PropTypes.string,
  placeholder: PropTypes.string,
  placeholderTextColor: PropTypes.string,
  textInputProps: PropTypes.object,
  onTextChanged: PropTypes.func,
  onInputSizeChanged: PropTypes.func,
  multiline: PropTypes.bool,
  textInputStyle: TextInput.propTypes.style,
};

@@ -185,24 +185,35 @@
 nent %7B%0A  onC
+ontentSizeC
 hange(e) %7B%0A 
@@ -207,24 +207,24 @@
 Change(e) %7B%0A
-
     const co
@@ -266,145 +266,129 @@
 ze;%0A
+%0A
     
-if (!this.contentSize) %7B%0A      this.contentSize = contentSize;%0A      this.props.onInputSizeChanged(this.contentSize);%0A    %7D else if (
+// Support earlier versions of React Native on Android.%0A    if (!contentSize) return;%0A%0A    if (!this.contentSize %7C%7C 
 this
@@ -842,16 +842,70 @@
 iline%7D%0A%0A
+        onChange=%7B(e) =%3E this.onContentSizeChange(e)%7D%0A
         
@@ -936,24 +936,35 @@
  =%3E this.onC
+ontentSizeC
 hange(e)%7D%0A  
@@ -953,32 +953,33 @@
 tSizeChange(e)%7D%0A
+%0A
         onChange
@@ -1682,33 +1682,8 @@
 = %7B%0A
-  onChange: () =%3E %7B%0A  %7D,%0A
   co
@@ -1974,16 +1974,16 @@
  %7D,%0A%7D;%0A%0A
+
 Composer
@@ -2001,36 +2001,8 @@
 = %7B%0A
-  onChange: PropTypes.func,%0A
   co

Use both onChange and onContentSizeChange to support Android RN <0.46