class SignupComponent extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: '',
      username: '',
      email: '',
      phone_number: '',
      password: '',
      smsVerificationCode: '',
      emailVerificationCode: '',
      loading: false,
      signup: false,
      showVerification: false,
    }
  }

  changeName(e) { this.setState({ name: e.target.value }) }

  blurUsername () {
    this.setState({usernameTouched: true, usernameError: usernamePolicy(this.state.username)})
  }
  changeUsername (e) {
    this.setState({ username: e.target.value })
    if(this.state.usernameTouched)
      this.setState({usernameError: usernamePolicy(this.state.username)})
  }

  blurEmail () {
    this.setState({emailTouched: true, emailError: emailPolicy(this.state.email)})
  }
  changeEmail (e) {
    this.setState({ email: e.target.value })
    if(this.state.emailTouched)
      this.setState({emailError: emailPolicy(this.state.email)})
  }

  blurPassword () {
    this.setState({passwordTouched: true, passwordError: passwordPolicy(this.state.password)})
  }
  changePassword (e) {
    this.setState({ password: e.target.value })
    if(this.state.passwordTouched)
      this.setState({passwordError: passwordPolicy(this.state.password)})
  }

  blurPhone_Number () {
    this.setState({phone_numberTouched: true, phone_numberError: phone_numberPolicy(this.state.phone_number)})
  }
  changePhone_Number (e) {
    this.setState({ phone_number: e.target.value })
    if(this.state.phone_numberTouched)
      this.setState({phone_numberError: phone_numberPolicy(this.state.phone_number)})
  }

  changeSMSverificationCode (e) { this.setState({ smsVerificationCode: e.target.value }) }

  handleSignupSubmit (e) {
    e.preventDefault()
    const {dispatch} = this.props
    dispatch(userActions.signup(this.state.name, this.state.username, this.state.email, this.state.phone_number, this.state.password))
  }

  handleVerifySMSsubmit (e) {
    e.preventDefault()
    const {dispatch} = this.props
    dispatch(userActions.verifyPhone(this.state.username, this.state.password, this.state.smsVerificationCode))
  }

  submissionValid (e) {
    return (this.state.name.length > 0 && this.state.username.length > 0 && this.state.email.length > 0 && this.state.phone_number.length > 0 && this.state.password.length > 0 && !this.state.passwordError && !this.state.phone_numberError && !this.state.passwordError)
  }

  render () {
    return (
      <div>
          <form onSubmit={this.handleSignupSubmit} autoComplete="off">
            <h2>Sign Up</h2>
            <div className="fieldsContainer">
              <TextField
                    hintText="Name"
                    value={this.state.name}
                    onChange={this.changeName}
                    errorStyle={errorStyle}
                    autoFocus={'autofocus'}
                    required />

              <TextField
                    style={{height: 55}}
                    hintText="Username"
                    value={this.state.username}
                    onChange={this.changeUsername}
                    onBlur={this.blurUsername}
                    errorText={this.state.usernameError}
                    errorStyle={errorStyle}
                    required />

              <TextField
                    style={{height: 55}}
                    type="email"
                    hintText="Email"
                    value={this.state.email}
                    onChange={this.changeEmail}
                    onBlur={this.blurEmail}
                    errorText={this.state.emailError}
                    errorStyle={errorStyle}
                    required />

              <TextField
                    style={{height: 55}}
                    type="number"
                    hintText="Phone Number"
                    value={this.state.phone_number}
                    onChange={this.changePhone_Number}
                    onBlur={this.blurPhone_Number}
                    errorText={this.state.phone_numberError}
                    errorStyle={errorStyle}
                    required />
              <TextField
                    style={{height: 55}}
                    type="password"
                    hintText="Password"
                    value={this.state.password}
                    onChange={this.changePassword}
                    onBlur={this.blurPassword}
                    errorText={this.state.passwordError}
                    errorStyle={errorStyle}
                    required />

              <RaisedButton
                    type="submit"
                    label="Sign Up"
                    className="submitButton"
                    primary={true}
                    disabled={!this.submissionValid()} />

              <CircularProgress
                    style={{position: 'absolute', padding: '27px 5px'}}
                    size={20}
                    hidden={!this.props.signingup}/>
            </div>
          </form>
      </div>
    )
  }
}