import React, { Component } from 'react';

class Register extends Component {
  constructor() {
    super();
    this.state = {
      displayName: '',
      displayNameError: '',
      email: '',
      emailError: '',
      password: '',
      passwordError: '',
      passwordConfirm: '',
      passwordConfirmError: '',
      onSubmitCheck: ['displayName', 'email', 'password', 'passwordConfirm']
    };

    this.handleChange = this.handleChange.bind(this);
    this.submitUser = this.submitUser.bind(this);
    this.validateField = this.validateField.bind(this);
  }

  handleChange(evt) {
    // This would also be a good place to validate fields too
    this.setState({ [evt.target.name]: evt.target.value }, this.validateField(evt.target.name, evt.target.value));
  }

  submitUser(evt) {
    evt.preventDefault()
    let { onSubmitCheck } = this.state

    // Need to validate fields first
    onSubmitCheck.forEach(fieldName => {
      this.validateField(fieldName, this.state[fieldName])
    })

    // If there are no errors, then register the user
    for (let index = 0; index < onSubmitCheck.length; index++) {
      if (this.state[onSubmitCheck[index] + 'Error'] !== '') {
        // there's an error so do nothing
        return
      }
    }
    // No errors found proceed
    console.log("Submitting Form...")
  }

  validateField(fieldName, value) {
    // We can import the validators from somewhere else, say AJV for example.
    let validators = {
      displayName: (value) => {
        if (value !== "a") {
          this.setState({ displayNameError: 'An error has occurred' })
        } else {
          this.setState({ displayNameError: '' })
        }
      },
      email: (value) => {
        if (value !== "a") {
          this.setState({ emailError: 'An error has occurred' })
        } else {
          this.setState({ emailError: '' })
        }
      },
      password: (value) => {
        if (value !== "a") {
          this.setState({ passwordError: 'An error has occurred' })
        } else {
          this.setState({ passwordError: '' })
        }
      },
      passwordConfirm: (value) => {
        if (value !== "a") {
          this.setState({ passwordConfirmError: 'An error has occurred' })
        } else {
          this.setState({ passwordConfirmError: '' })
        }
      }
    }

    validators[fieldName](value)
    // If I move this out, I'll need to update the above to
    // this.setState({fieldName: validators[fieldName](value)})
  }


  // was-validated should not be used because 1. It can only really be applied at the end. 2. It only pays attention to HTML5 validity api and ignores
  // custom validation. Ie, if a required field is not empty, was-validated will mark that as valid, even if we have custom validation that's failing
  render() {
    return (
      <form className="mt-3" onSubmit={this.submitUser} noValidate>
        <div className="container">
          <div className="row justify-content-center">
            <div className="col-lg-8">
              <div className="card bg-light">
                <div className="card-body">
                  <h3 className="font-weight-light mb-3">Register</h3>
                  <div className="form-row">
                    <section className="col-sm-12 form-group">
                      <label
                        className="form-control-label sr-only"
                        htmlFor="displayName"
                      >
                        Display Name
                      </label>
                      <input
                        className={this.state.displayNameError ? "form-control is-invalid" : "form-control"}
                        type="text"
                        id="displayName"
                        placeholder="Display Name"
                        name="displayName"
                        required
                        value={this.state.displayName}
                        onChange={this.handleChange}
                      />
                      <div className="valid-feedback">
                        Looks good!
                      </div>
                      <div className="invalid-feedback">
                        {this.state.displayNameError}
                      </div>
                    </section>
                  </div>
                  <section className="form-group">
                    <label
                      className="form-control-label sr-only"
                      htmlFor="email"
                    >
                      Email
                    </label>
                    <input
                      className={this.state.emailError ? "form-control is-invalid" : "form-control"}
                      type="email"
                      id="email"
                      placeholder="Email Address"
                      required
                      name="email"
                      value={this.state.email}
                      onChange={this.handleChange}
                    />
                    <div className="invalid-feedback">
                      {this.state.emailError}
                    </div>
                  </section>
                  <div className="form-row">
                    <section className="col-sm-6 form-group">
                      <input
                        className={this.state.passwordError ? "form-control is-invalid" : "form-control"}
                        type="password"
                        name="password"
                        placeholder="Password"
                        value={this.state.password}
                        onChange={this.handleChange}
                      />
                      <div className="invalid-feedback">
                        {this.state.passwordError}
                      </div>
                    </section>
                    <section className="col-sm-6 form-group">
                      <input
                        className={this.state.passwordConfirmError ? "form-control is-invalid" : "form-control"}
                        type="password"
                        required
                        name="passwordConfirm"
                        placeholder="Confirm Password"
                        value={this.state.passwordConfirm}
                        onChange={this.handleChange}
                      />
                      <div className="invalid-feedback">
                        {this.state.passwordConfirmError}
                      </div>
                    </section>
                  </div>
                  <div className="form-group text-right mb-0">
                    <button className="btn btn-primary" type="submit">
                      Register
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    );
  }
}

export default Register;