class ProfileBox extends React.Component {
   constructor() {
    super();
    this.post = this.post.bind(this);
  }
  
   post(path, encodedFields) {
    let data = "csrf_token=12345" + encodedFields;
    let xhr = new XMLHttpRequest();
    xhr.addEventListener("readystatechange", function () {
      if (this.readyState === 4 && this.status === 200) {
        console.log(this.responseText);
      }
    });
    xhr.open("POST", path);
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    // xhr.send(data);
    console.log(data);
  }
    
  
  
  render() {
    return (
      <div className="profile-box">
       <h1>Manage your Profile</h1>
         <div className="profile-list">
            <Row title="Email" current="your email" post={ this.post } />
            <Row  title="Name" current="User Li" post={ this.post }/>
            <Row  title="Password" current="******" post={ this.post }/>
            <div className="type">
            <div className="typeTitle">
               Account Type
             </div>
             <div>
              <button>free</button><button></button>
             </div>
           </div>
           
          </div>
            <a className="delete" onClick={this.post.bind(this, "/account/delete","" )}>Delete Account</a>
       </div>
    )
  }
}

class Row extends React.Component {
  constructor() {
    super();
     this.state = {
    isOpen: false
    };
  }

  handleClick() {
    this.setState({
     isOpen: !this.state.isOpen,
    });
  }

  render() {
    let title = this.props.title;
    let form = <Form title={ title } classes={ this.state.isOpen ? 'open' : '' } cancel={this.handleClick.bind(this)} post={ this.props.post }/>;
    let current = this.state.isOpen ? '' : <div>{ this.props.current }</div>;
    if (title == "Name") form = <NameForm name={ this.props.current } classes={ this.state.isOpen ? 'open' : '' } cancel={this.handleClick.bind(this)} post={ this.props.post }/>;
   
    return (
      <div className="row">
        <div className="title">{title}</div>
        <div>{current}{form}</div>
        <a className="change"  onClick={this.handleClick.bind(this)}>Change {title}</a>
    </div>
    )
  }
}

class Form extends React.Component {
  constructor() {
    super();
    this.state = {
      error: false
    };

    this.change = this.change.bind(this);
    this.submit = this.submit.bind(this);
    this.cancel = this.cancel.bind(this);
  }
  
  change() {
    let error = !(this.new.value == this.confirm.value);
    this.setState({
      error
    });
  }
  
   submit(e) {
    e.preventDefault();
    if (!this.new.value || this.state.error) return;
    if (this.title == 'Password') {
      let fields = '&new=' + this.new.value;
      this.props.post('/account/update/password', encodeURI(fields));
    } else {
      let fields = `&email=${this.new.value}`;
      this.props.post('/account/update', encodeURI(fields));
    }
    e.target.reset();
  }
  
  cancel(){
    this.setState({
      error:false
    });
    this.props.cancel();
  }
  
  render() {
    let error = this.state.error ? <span className="error"> { this.props.title} not match </span> : "";
    let title = this.props.title;
    return (
      <form className={this.props.classes } onSubmit={ this.submit }>
        <div>
        <input  type={title.toLowerCase()} placeholder={`New ${title}`} ref={ input => this.new = input} onChange={ this.change }/>
        <input  type={ title.toLowerCase() } placeholder={`Confirm ${title}`} ref={ input => this.confirm = input} onChange={ this.change }/>
          {error}
        </div>
        <div>
          <button  type="reset" onClick={this.cancel } >cancel </button>  
          <button className="green" type="submit"> submit</button>
        </div>
       </form>
    )
  }
}

class NameForm extends React.Component {
   constructor(props) {
    super(props);
    this.submit = this.submit.bind(this);
    [ this.first, this.last ] = this.props.name.split(' ');
  }
  submit(e) {
    e.preventDefault();
    console.log(this.f.value, this.l.value);
  }
  render() {
   
    return (
      <form className={this.props.classes} onSubmit={ this.submit }>
        <input type='text' defaultValue={ this.first } ref={ first => this.f = first }/>
        <input type='text' defaultValue={ this.last } ref={ last => this.l = last } />
        <div>
          <button  type="reset" onClick={ this.props.cancel } >cancel </button>  
          <button className="green" type="submit"> submit</button>
        </div>
      </form>
    );
  }
}

ReactDOM.render(
  <ProfileBox/>,
  document.getElementById('app')
);