/* @flow */
import React, { PureComponent } from 'react';
import { StyleSheet, TextInput, TouchableWithoutFeedback, View } from 'react-native';

import type { Context, Style } from '../types';
import { autocompleteUrl, fixRealmUrl, hasProtocol } from '../utils/url';
import RawLabel from './RawLabel';

const styles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
    opacity: 0.8,
  },
  realmInput: {
    padding: 0,
    fontSize: 20,
  },
  realmPlaceholder: {
    opacity: 0.75,
  },
  realmInputEmpty: {
    width: 1,
  },
});

type Props = {|
  defaultValue: string,
  defaultOrganization: string,
  protocol: string,
  append: string,
  navigation: Object,
  style?: Style,
  onChangeText: (value: string) => void,
  onSubmitEditing: () => Promise<void>,
  enablesReturnKeyAutomatically: boolean,
|};

type State = {|
  value: string,
|};

export default class SmartUrlInput extends PureComponent<Props, State> {
  context: Context;
  state = {
    value: '',
  };
  textInputRef: any;
  focusListener: Object;

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

  componentDidMount() {
    this.focusListener = this.props.navigation.addListener('didFocus', () =>
      this.textInputRef.focus(),
    );
  }

  componentWillUnmount() {
    this.focusListener.remove();
  }

  handleChange = (value: string) => {
    this.setState({ value });

    const { append, protocol, onChangeText } = this.props;
    onChangeText(fixRealmUrl(autocompleteUrl(value, protocol, append)));
  };

  urlPress = () => {
    this.textInputRef.blur();
    setTimeout(() => this.textInputRef.focus(), 100);
  };

  renderPlaceholderPart = (text: string) => (
    <TouchableWithoutFeedback onPress={this.urlPress}>
      <RawLabel
        style={[styles.realmInput, this.context.styles.color, styles.realmPlaceholder]}
        text={text}
      />
    </TouchableWithoutFeedback>
  );

  render() {
    const { styles: contextStyles } = this.context;
    const {
      defaultOrganization,
      protocol,
      append,
      defaultValue,
      style,
      onSubmitEditing,
      enablesReturnKeyAutomatically,
    } = this.props;
    let { value } = this.state;
    let showAppend = value.indexOf('.') === -1;
    if (defaultValue && value.length === 0) {
      showAppend = false;
      value = defaultValue;
    }

    return (
      <View style={[styles.wrapper, style]}>
        {!hasProtocol(value) && this.renderPlaceholderPart(protocol)}
        <TextInput
          style={[
            styles.realmInput,
            contextStyles.color,
            value.length === 0 && styles.realmInputEmpty,
          ]}
          autoFocus
          autoCorrect={false}
          autoCapitalize="none"
          returnKeyType="go"
          defaultValue={defaultValue}
          onChangeText={this.handleChange}
          blurOnSubmit={false}
          keyboardType="url"
          underlineColorAndroid="transparent"
          onSubmitEditing={onSubmitEditing}
          enablesReturnKeyAutomatically={enablesReturnKeyAutomatically}
          ref={(component: any) => {
            this.textInputRef = component;
          }}
        />
        {value.length === 0 && this.renderPlaceholderPart(defaultOrganization)}
        {showAppend && this.renderPlaceholderPart(append)}
      </View>
    );
  }
}

@@ -136,16 +136,107 @@
 native';
+%0Aimport type %7B NavigationEventSubscription, NavigationScreenProp %7D from 'react-navigation';
 %0A%0Aimport
@@ -753,22 +753,43 @@
 gation: 
-Object
+NavigationScreenProp%3Cmixed%3E
 ,%0A  styl
@@ -1132,14 +1132,42 @@
 er: 
-Object
+void %7C NavigationEventSubscription
 ;%0A%0A 
@@ -1386,32 +1386,64 @@
 WillUnmount() %7B%0A
+    if (this.focusListener) %7B%0A  
     this.focusLi
@@ -1459,16 +1459,22 @@
 move();%0A
+    %7D%0A
   %7D%0A%0A  h

Fix Object pseudotypes, and a type error they hid.