import React from 'react';
import { TextInput } from 'react-native';

const MAX_LENGTH = 95;

class MessageInput extends React.Component {
  constructor(props) {
    super(props);

    this.valueLength = 0;
    this.amountOfEmoji = 0;

    this.state = {
      value: '',
      maxLength: MAX_LENGTH,
    }
  }
  
  onChangeText = (text) => {
    // if text.length increased by 2, then the user has typed an emoji
    if ((text.length - this.valueLength) === 2) {
      this.amountOfEmoji += 1;
    }

    // maxLength will be increased to support emoji as only one character count
    let maxLength = MAX_LENGTH + this.amountOfEmoji;

    // if missing only one character to be typed, reduce maxLength to avoid emoji breaks the TextInput
    if (text.length >= (MAX_LENGTH + this.amountOfEmoji) - 1) {
      maxLength = text.length;
    }

    this.setState({ value: text, maxLength });
    this.valueLength = text.length;
  }

  render() {
    return (
      <TextInput
        editable
        value={this.state.value}
        maxLength={this.state.maxLength}
        onChangeText={this.onChangeText}
      />
    )
  }
}