ProfileSetupFirstStep = React.createClass({
  mixins: [ErrorsMixin],
  getInitialState() {
    return {
      gender: null, // default is no gender
    }
  },
  submit(event) {
    event.preventDefault();
    // make sure gender was set by user
    if (!this.state.gender){
      throwError("Please pick a gender for your baby");
    }
    if (this.refs.password.value === this.refs.confirmPassword.value) {
      if (this.refs.password.value.length >= 6) {
        Accounts.createUser({
          profile: {
            gender: this.state.gender,
            photo: this.insertImage(),
            user: this.refs.babyName.value
          },
          email: this.refs.email.value,
          password: this.refs.password.value
        }, this.handleErrors);
      } else {
        throwError("Password is too short");
      }
    } else {
      throwError("Password doesn`t match");
    }
  },

  insertImage () {
    var fsImage = new FS.File(this.refs.photoInput.files[0]);
    return Images.insert(fsImage, this.handleErrors);
  },
  onGenderChange(e) {
    // prevent default stops radio button from changing position, don't use
    this.setState({gender: e.target.value});
  },

  render() {
    return (
      <div className="page">
        <h1 className="page-title">Profile Setup</h1>
        <form name="profile" onSubmit={this.submit}>
          <div className="input-cont">
            <input type="text" name="babyName" ref="babyName" placeholder="Baby’s name" />
          </div>

          <div className="input-cont" ref="gender ">
            <input type="radio" name="gender" value="male" onChange={this.onGenderChange} /> BOY
            <input type="radio" name="gender" value="female" onChange={this.onGenderChange} /> GIRL
          </div>

          <div className="input-cont">
            <input type="email" name="email" ref="email" placeholder="Your email" />
          </div>

          <div className="input-cont">
            <input type="password" name="password" ref="password" placeholder="Password" />
          </div>

          <div className="input-cont">
            <input type="password" name="confirmPassword" ref="confirmPassword" placeholder="Confirm Password" />
          </div>

          <div className="input-cont">
            <input type="file" ref="photoInput" required/>
          </div>

          <p>
            By tapping “Next”, you accept our terms and cond- tions. We will only use your information
            to send to up- dates on the site and notifications for using the site. We will never share
            your information with anyone.
          </p>

          <div className="actions">
            <button type="submit" className="btn btn-default">Next</button>
          </div>
        </form>
      </div>
    )
  }
});