import React from 'react';
import {
  StyleSheet,
  View,
  ScrollView,
} from 'react-native';
import { connect } from 'react-redux';

import {
  isHomeNarrow,
  isSpecialNarrow,
  isStreamNarrow,
  isTopicNarrow,
  isPrivateNarrow,
  isGroupNarrow,
} from '../utils/narrow';
import { Input } from '../common';
import { getAuth } from '../account/accountSelectors';
import sendMessage from '../api/sendMessage';
import SendButton from './SendButton';
import getAutocompletedText from '../autocomplete/getAutocompletedText';
import EmojiAutocomplete from '../autocomplete/EmojiAutocomplete';
import StreamAutocomplete from '../autocomplete/StreamAutocomplete';
import PeopleAutocomplete from '../autocomplete/PeopleAutocomplete';

const MIN_HEIGHT = 38;
const MAX_HEIGHT = 200;

const styles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
  },
  messageBox: {
    flex: 1,
  },
  composeInput: {
    flex: 1,
    padding: 4,
    paddingLeft: 8,
    fontSize: 16,
  },
  sendButton: {
    width: 80,
  },
});

type Props = {
  auth: Object,
  narrow: Object,
};

class ComposeText extends React.Component {

  props: Props;

  constructor(props: Props) {
    super(props);
    this.state = {
      editing: false,
      text: '',
      autocomplete: false,
      contentHeight: MIN_HEIGHT,
    };
  }

  handleSend = () => {
    const { auth, narrow } = this.props;
    const { text } = this.state;

    if (isPrivateNarrow(narrow) || isGroupNarrow(narrow)) {
      sendMessage(auth, 'private', narrow[0].operand, '', text);
    } else if (isStreamNarrow(narrow)) {
      sendMessage(auth, 'stream', narrow[0].operand, '(no topic)', text);
    } else if (isTopicNarrow(narrow)) {
      sendMessage(auth, 'stream', narrow[0].operand, narrow[1].operand, text);
    }

    this.setState({ text: '' });
  }

  handleContentSizeChange = (event) =>
    this.setState({ contentHeight: event.nativeEvent.contentSize.height });

  handleChangeText = (text: string) =>
    this.setState({ text });

  handleAutocomplete = (autocomplete: string) =>
    this.setState(prevState => ({
      text: getAutocompletedText(prevState.text, autocomplete),
    }));

  render() {
    const { contentHeight, text } = this.state;
    const { narrow } = this.props;
    const height = Math.min(Math.max(MIN_HEIGHT, contentHeight), MAX_HEIGHT);
    const lastword = text.match(/\b(\w+)$/);
    const lastWordPrefix = lastword && lastword.index && text[lastword.index - 1];
    const canSendToCurrentNarrow = isHomeNarrow(narrow) && isSpecialNarrow(narrow);

    return (
      <View style={styles.wrapper}>
        {lastWordPrefix === ':' &&
          <EmojiAutocomplete filter={lastword[0]} onAutocomplete={this.handleAutocomplete} />}
        {lastWordPrefix === '#' &&
          <StreamAutocomplete filter={lastword[0]} onAutocomplete={this.handleAutocomplete} />}
        {lastWordPrefix === '@' &&
          <PeopleAutocomplete filter={lastword[0]} onAutocomplete={this.handleAutocomplete} />}
        <ScrollView style={[styles.messageBox, { height }]}>
          <Input
            customStyle={[styles.composeInput]}
            blurOnSubmit
            defaultValue={text}
            multiline
            underlineColorAndroid="transparent"
            returnKeyType="send"
            height={contentHeight}
            onContentSizeChange={this.handleContentSizeChange}
            onChangeText={this.handleChangeText}
            onSubmitEditing={this.handleSend}
            placeholder="Type a message here"
          />
        </ScrollView>
        <SendButton
          disabled={text.length === 0 || canSendToCurrentNarrow}
          onPress={this.handleSend}
        />
      </View>
    );
  }
}

const mapStateToProps = (state) => ({
  auth: getAuth(state),
  narrow: state.chat.narrow,
});

export default connect(mapStateToProps)(ComposeText);

@@ -51,16 +51,29 @@
   View,%0A
+  TextInput,%0A
   Scroll
@@ -78,16 +78,16 @@
 llView,%0A
-
 %7D from '
@@ -154,43 +154,8 @@
 t %7B%0A
-  isHomeNarrow,%0A  isSpecialNarrow,%0A
   is
@@ -221,16 +221,16 @@
 Narrow,%0A
+
 %7D from '
@@ -251,43 +251,8 @@
 w';%0A
-import %7B Input %7D from '../common';%0A
 impo
@@ -2437,11 +2437,14 @@
 = is
-Hom
+Privat
 eNar
@@ -2459,20 +2459,75 @@
 ow) 
-&& isSpecial
+%7C%7C%0A      isGroupNarrow(narrow) %7C%7C isStreamNarrow(narrow) %7C%7C isTopic
 Narr
@@ -3003,25 +3003,59 @@
 View style=%7B
-%5B
+%7B height %7D%7D contentContainerStyle=%7B
 styles.messa
@@ -3063,21 +3063,8 @@
 eBox
-, %7B height %7D%5D
 %7D%3E%0A 
@@ -3073,16 +3073,20 @@
        %3C
+Text
 Input%0A  
@@ -3099,22 +3099,15 @@
     
-customS
+s
 tyle=%7B
-%5B
 styl
@@ -3121,17 +3121,16 @@
 oseInput
-%5D
 %7D%0A      
@@ -3577,16 +3577,16 @@
 dButton%0A
-
         
@@ -3618,16 +3618,17 @@
 == 0 %7C%7C 
+!
 canSendT

Fix compose box resizing and disable logic