import React, { PropTypes } from 'react';
import './ReactTextField.css';

export default class ReactTextField extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      successMessage: null,

      errorMessage: null,

      isValid: false,
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    const value = e.target.value;
    this.validate(value);
    // Execute callback function.
    if (this.props.onChange) {
      this.props.onChange(this.state.isValid);
    }
  }

  // TODO: Refactoring

  validate(value) {
    let errorMessage = null;
    let isValid = true;

    for (const err of this.props.validators) {
      if (!err.validator) {
        continue;
      }
      if (!err.validator(value)) {
        errorMessage = err.message;
        isValid = false;
        break;
      }
    }
    this.setState({ isValid, errorMessage });
  }

  render() {
    return (
      <div className="ReactTextField--container">
        <input type={this.props.type} className="ReactTextField--input" onChange={this.onChange} />
        { this.state.isValid ?
          <span className="ReactTextField-message ReactTextField--success">
            {this.props.successMessage}
          </span>
          :
          <span className="ReactTextField-message ReactTextField--error">
            {this.state.errorMessage}
          </span>
        }
      </div>
    );
  }
}

ReactTextField.propTypes = {

  type: PropTypes.oneOf([
    'text',
    'password',
    'email',
    'tel',
    'url',
  ]),

  // Success message when validator passed.
  successMessage: PropTypes.string,

  // One of Error object includes validater and error message.
  validators: PropTypes.arrayOf(React.PropTypes.shape({
    message: PropTypes.string.isRequired,
    validator: PropTypes.func.isRequired,
  })),

  onChange: React.PropTypes.func,

};

ReactTextField.defaultProps = {
  type: 'text',
  validators: [],
};


@@ -327,27 +327,153 @@
 ;%0A  
-%7D%0A%0A  onChange(e) %7B%0A
+  this.onBlur = this.onBlur.bind(this);%0A    this.onFocus = this.onFocus.bind(this);%0A  %7D%0A%0A  onChange(e) %7B%0A    if (!this.props.validateOnBlur) %7B%0A  
     
@@ -502,24 +502,26 @@
 .value;%0A    
+  
 this.validat
@@ -530,16 +530,22 @@
 value);%0A
+    %7D%0A
     // E
@@ -659,16 +659,288 @@
  %7D%0A  %7D%0A%0A
+  onBlur(e) %7B%0A    const value = e.target.value;%0A    if (this.props.validateOnBlur) %7B%0A      this.validate(value);%0A    %7D%0A%0A    if (this.props.onBlur) %7B%0A      this.props.onBlur(e);%0A    %7D%0A  %7D%0A%0A  onFocus(e) %7B%0A    if (this.props.onFocus) %7B%0A      this.prop.onFocus(e);%0A    %7D%0A  %7D%0A%0A
   // TOD
@@ -1396,16 +1396,26 @@
   %3Cinput
+%0A         
  type=%7Bt
@@ -1429,16 +1429,26 @@
 ps.type%7D
+%0A         
  classNa
@@ -1473,16 +1473,26 @@
 --input%22
+%0A         
  onChang
@@ -1508,16 +1508,135 @@
 nChange%7D
+%0A          onBlur=%7Bthis.onBlur%7D%0A          onFocus=%7Bthis.onFocus%7D%0A          placeholder=%7Bthis.props.placeholder%7D%0A       
  /%3E%0A    
@@ -2101,16 +2101,50 @@
 %0A  %5D),%0A%0A
+  placeholder: PropTypes.string,%0A%0A
   // Suc
@@ -2443,99 +2443,225 @@
 ge: 
-React.PropTypes.func,%0A%0A%7D;%0A%0AReactTextField.defaultProps = %7B%0A  type: 'text',%0A  validators: %5B%5D
+PropTypes.func,%0A  onBlur: PropTypes.func,%0A  onFocus: PropTypes.func,%0A%0A  validateOnBlur: PropTypes.bool,%0A%0A%7D;%0A%0AReactTextField.defaultProps = %7B%0A  type: 'text',%0A  placeholder: '',%0A  validators: %5B%5D,%0A  validateOnBlur: false
 ,%0A%7D;

Update component. Add validateOnBlur, onBlur, onFocus props.