/* app/components/auth/Input/index.js */

'use strict';

import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';
import PropTypes from 'prop-types';

import { HALF_OP_WHITE } from '../../../config/constants';
import Line from '../../common/Line';
import styles from './styles';

class Input extends Component {
  render() {
    const {
      children,
      icon,
      keyboardType,
      onChangeText,
      onSubmitEditing,
      placeholder,
      returnKeyType,
      secureTextEntry,
      width,
      value,
      onFocus,
      onBlur,
      isRequired,
      style,
      rightItem
    } = this.props;
    const autoCapitalize = keyboardType !== 'email-address';
    const paddingHorizontal = isRequired ? 2 : 2;
    return (
      <View
        ref={node => this._root = node}
        style={[styles.container, { width }, style]}
      >
        <View style={styles.subcontainer}>
          {icon != null && this._renderIcon(icon)}
          {isRequired && <Text style={styles.requiredText}>*</Text>}
           <TextInput
            ref="input"
            autoCapitalize={autoCapitalize ? 'words' : 'none'}
            autoCorrect={false}
            keyboardType={keyboardType}
            onFocus={onFocus}
            onBlur={onBlur}
            onChangeText={onChangeText}
            onSubmitEditing={onSubmitEditing}
            placeholder={placeholder}
            placeholderTextColor={HALF_OP_WHITE}
            returnKeyType={returnKeyType}
            secureTextEntry={secureTextEntry}
            style={[styles.input, { flex: 1, paddingHorizontal }]}
            underlineColorAndroid="transparent"
            value={value}
          />
          {value !== '' && rightItem}
        </View>
        <Line width={width} />
      </View>
    );
  }

  _renderIcon(icon) {
    return (
      <View style={styles.iconView}>
        {icon}
      </View>
    );
  }

  focus() {
    this.refs.input.focus();
  }

  isFocused() {
    return this.refs.input.isFocused();
  }
};

Input.propTypes = {
  keyboardType: PropTypes.string,
  icon: PropTypes.any,
  onChangeText: PropTypes.func.isRequired,
  onSubmitEditing: PropTypes.func.isRequired,
  onFocus: PropTypes.func,
  onBlur: PropTypes.func,
  placeholder: PropTypes.string.isRequired,
  returnKeyType: PropTypes.string,
  secureTextEntry: PropTypes.bool,
  value: PropTypes.string,
  width: PropTypes.number.isRequired,
  isRequired: PropTypes.bool,
  rightItem: PropTypes.any,
};

Input.defaultProps = {
  keyboardType: 'default',
  secureTextEntry: false,
  returnKeyType: 'done',
  onBlur: () => {},
  onFocus: () => {},
  value: '',
  isRequired: false
};

export { Input };