/* @flow */
import React, { PureComponent } from 'react';
import { TextInput } from 'react-native';
import { FormattedMessage } from 'react-intl';

import type { Context, LocalizableText, Style } from '../types';
import { nullFunction } from '../nullObjects';
import { HALF_COLOR, BORDER_COLOR } from '../styles';

type Props = {
  style?: Style,
  placeholder: LocalizableText,
  clearButton: boolean,
  onChangeText: (text: string) => void,
  textInputRef: (component: any) => void,
};

type State = {
  isFocused: boolean,
};

export default class Input extends PureComponent<Props, State> {
  context: Context;
  props: Props;
  state: State;
  textInput: TextInput;

  static contextTypes = {
    styles: () => null,
  };

  static defaultProps = {
    placeholder: {},
  };

  static defaultProps = {
    restProps: [],
    clearButton: false,
    onChangeText: nullFunction,
    textInputRef: nullFunction,
  };

  state = {
    isFocused: false,
  };

  handleClear = () => {
    const { onChangeText } = this.props;
    if (onChangeText) {
      onChangeText('');
    }
    this.textInput.clear();
  };

  handleFocus = () => {
    this.setState({
      isFocused: true,
    });
  };

  handleBlur = () => {
    this.setState({
      isFocused: false,
    });
  };

  render() {
    const { styles } = this.context;
    const { style, placeholder, textInputRef, ...restProps } = this.props;
    const { isFocused } = this.state;
    const placeholderMessage = placeholder.text || placeholder;

    return (
      <FormattedMessage
        id={placeholderMessage}
        defaultMessage={placeholderMessage}
        values={placeholder.values}
      >
        {text => (
          <TextInput
            style={[styles.input, style]}
            placeholder={text}
            placeholderTextColor={HALF_COLOR}
            underlineColorAndroid={isFocused ? BORDER_COLOR : HALF_COLOR}
            onFocus={this.handleFocus}
            onBlur={this.handleBlur}
            ref={(component: any) => {
              this.textInput = component;
              if (textInputRef) {
                textInputRef(component);
              }
            }}
            {...restProps}
          />
        )}
      </FormattedMessage>
    );
  }
}

@@ -523,16 +523,542 @@
 an,%0A%7D;%0A%0A
+/**%0A * A light abstraction over the standard TextInput component%0A * that allows us to seamlessly provide internationalization%0A * capabilities and also style the component depending on%0A * the platform the app is running on.%0A *%0A * @prop %5Bstyle%5D - Style applied to the TextInput component.%0A * @prop %5Bplaceholder%5D - Text to be shown when no value is entered.%0A * @prop onChangeText - Event called when text is edited.%0A * @prop textInputRef - Callback used to pass a reference to the%0A *   wrapped TextInput to parent component.%0A */%0A
 export d

Document Input component.