import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reduxForm, reset } from 'redux-form';
import InputField from './forms/inputField.jsx';
import { changePassword } from '../actions/userActions';

class ChangePassword extends Component {
  /**
  * Change event
  */
  handleSubmit(data) {
    let { dispatch } = this.props;
    dispatch(changePassword(data))
      .then(resp => dispatch(reset('changePassword')));
  }

  /**
   * Render method
   */
  render() {
    const {
      fields: {
        id,
        oldPassword,
        newPassword,
        newPasswordConfirmed
      },
      handleSubmit,
      me,
      globalError
    } = this.props;

    let errorMessage = null;
    if(globalError && globalError.get('message') !== '') {
      errorMessage = (<p>{globalError.get('message')}</p>);
    }

    return (
      <div className="changePassword">
        <div className="portalMainForm">
          <div className="screenTitle">Wijzig wacthwoord</div>
        </div>
        <div className="listContent">
          {errorMessage}
          <form className="changePassword" onSubmit={handleSubmit(this.handleSubmit.bind(this))}>
            <div className="innerForm">
              <input type="hidden" value={id} />

              <InputField name="oldPassword" label="Oude wachtwoord"
                type="password" required={true} {...oldPassword} />

              <InputField name="newPassword" label="Nieuwe wachtwoord"
                type="password" required={true} {...newPassword} />

              <InputField name="newPasswordConfirmed" label="Nieuwe wachtwoord nogmaals"
                type="password" required={true} {...newPasswordConfirmed} />

              <div className="form-group">
                <button type="submit">Wijzig wachtwoord</button>
              </div>
            </div>
          </form>
        </div>
      </div>);
  }
}

ChangePassword = reduxForm({
  form: 'changePassword',
  fields: [
    'id',
    'oldPassword',
    'newPassword',
    'newPasswordConfirmed'
  ]
}, (state) => {
  return {
    initialValues: {
      id: state.me.get('id')
    },
    me: state.me,
    globalError: state.globalError
  };
})(ChangePassword);

export default ChangePassword;