'use strict';

import React, { Component } from 'react';

import { connect } from 'react-redux';
import { updatePassword } from '../actions/users-actions';
import { bindActionCreators } from 'redux';

class Profile extends Component {

  constructor (props) {
    super(props);

    this.state = {
      editMode : false
    };

  }

  onEditFormSubmit (event) {
    event.preventDefault();
    this.setState({
      editMode : true,
      changePass : {
        oldPass : null,
        newPass : null,
        repPass : null
      }
    });
  }

  onCancelEdit (event) {
    event.preventDefault();
    this.setState({
      editMode : false,
      changePass : null
    });
  }

  onUpdateFormSubmit (event) {
    event.preventDefault();
    if (this.state.changePass.newPass === this.state.changePass.repPass) {
      this.props.updatePassword(this.props.user.id, this.state.changePass.oldPass, this.state.changePass.newPass);
    } else {
      alert('New password and confirmation dont match');
    }
  }
}

onInputChange (event) {

  var changePass = Object.assign({}, this.state.changePass);

  changePass[event.target.id] = event.target.value;

  this.setState({
    changePass
  });

}

userProfile () {

  if (this.props.user) {

    if (this.state.editMode) {
      return (
        <form onSubmit={this.onUpdateFormSubmit.bind(this)} className="form-group-sm">
          <div className="form-group">
            <input id="oldPass" onChange={this.onInputChange.bind(this)} value={this.state.changePass.oldPass}
                   type="password" className="form-control" placeholder="Old Password" required/>
            <input id="newPass" onChange={this.onInputChange.bind(this)} value={this.state.changePass.newPass}
                   type="password" className="form-control" placeholder="New Password" required/>
            <input id="repPass" onChange={this.onInputChange.bind(this)} value={this.state.changePass.repPass}
                   type="password" className="form-control" placeholder="Repeat New Password" required/>
          </div>
          <div className="form-group">
            <button type="submit" className="btn btn-primary btn-sm btn-block">Save</button>
            <button type="button" onClick={this.onCancelEdit.bind(this)} className="btn btn-warning btn-sm btn-block">
              Cancel
            </button>
          </div>
        </form>
      );
    } else {
      return (
        <div>
          <h3>Username: {this.props.user.username}</h3>
          <h4>Name: {this.props.user.name}</h4>
          <h4>Email: {this.props.user.email}</h4>
          <div className="row">
            <form onSubmit={this.onEditFormSubmit.bind(this)} className="form-group-sm col-xs-6">
              <div className="clearfix">
                <button type="submit" className="btn btn-info btn-sm">
                  <span className="glyphicon glyphicon-edit"/>
                </button>
              </div>
            </form>
          </div>
        </div>
      );
    }

  } else {
    return (
      <h3>NO SELECTED USER!</h3>
    );
  }

}

render () {
  return (
    <div className="jumbotron">
      {this.userProfile()}
    </div>
  );
}



function mapStateToProps (state) {
  return {
    user : state.login.user
  };
}

function mapDispatchToProps (dispatch) {
  return bindActionCreators({
    updatePassword : updatePassword
  }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(User);