import React from 'react'
import Admin from './../admin'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { updateUserPassword } from '../actions/index'
import { withExitPrompt } from './util/with-exit-prompt'

interface ChangePasswordProps {
  closePasswordModal: any,
  errors: string[],
  updateUserPassword: any,
  userId: string
}

interface ChangePasswordState {
  changesToSave: boolean
  errors: string[]
  fetching: boolean
  justSaved: boolean
  passwords: {
    password: string,
    confirmNewPassword: string
  }
  user: {
    id: string
  }
}

class ChangePassword extends React.Component<ChangePasswordProps, ChangePasswordState> {

  constructor(props) {
    super(props);
    this.state = {
      fetching: false,
      user: { id: this.props.userId },
      passwords: { password: "", confirmNewPassword: "" },
      errors: [],
      changesToSave: false,
      justSaved: false
    };
  }

  updatePassword() {
    var passwords = ['password', 'confirmNewPassword'];
    for (let i = 0; i < passwords.length; i++) {
      if (!this.state.passwords[passwords[i]]) {
        return false;
      }
      if (this.state.passwords[passwords[i]].length < 6) {
        return false;
      }
    }
    return true;
  }

  changeFieldArgs() {
    return {
      thing: "passwords",
      errorsArray: this.state.errors,
      changesFunction: this.updatePassword.bind(this)
    };
  }

  clickUpdate() {
    if (this.state.changesToSave) {
      if (this.state.passwords.password === this.state.passwords.confirmNewPassword) {
        this.setState({ fetching: true });
        this.props.updateUserPassword({
          id: this.state.user.id,
          password: this.state.passwords.password
        }).then(() => {
          this.props.closePasswordModal();
        }, () => {
          this.setState({
            fetching: false,
            errors: this.props.errors
          });
        });
      } else {
        this.setState({ errors: ["Passwords do not match"] });
      }
    }
  }

  render() {
    return(
      <div className="admin-modal change-password">
        <div className="component">
          <div className="white-box">
            { Admin.renderSpinner(this.state.fetching) }
            { Admin.renderGrayedOut(this.state.fetching) }
            <div className="row">
              <div className="col-xs-12">
                <h2>New Password</h2>
                <input className={ Admin.errorClass(this.state.errors, ["Password can't be blank", "Passwords do not match"]) } type="password" onChange={ Admin.changeField.bind(this, this.changeFieldArgs()) } data-field="password" value={ this.state.passwords.password } />
                { Admin.renderModalFieldError(this.state.errors, ["Password can't be blank", "Passwords do not match"]) }
              </div>
            </div>
            <div className="row">
              <div className="col-xs-12">
                <h2>Confirm New Password</h2>
                <input className={ Admin.errorClass(this.state.errors, ["Passwords do not match"]) } type="password" onChange={ Admin.changeField.bind(this, this.changeFieldArgs()) } data-field="confirmNewPassword" value={ this.state.passwords.confirmNewPassword } />
                { Admin.renderModalFieldError(this.state.errors, ["Passwords do not match"]) }
              </div>
            </div>
            <div className="row change-password-button-container">
              <a className={ "orange-button" + Admin.renderDisabledButtonClass(this.state.fetching || !this.state.changesToSave) } onClick={ this.clickUpdate.bind(this) }>Update Password</a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (reducers, props) => {
  return reducers.standardReducer;
};

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ updateUserPassword }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(withExitPrompt(ChangePassword));