import React from 'react';
import AddCharacterStore from '../stores/AddCharacterStore';
import AddCharacterActions from '../actions/AddCharacterActions';

class AddCharacter extends React.Component {
constructor(props) {

super(props);
this.state = AddCharacterStore.getState();
this.onChange = this.onChange.bind(this);

}

componentDidMount() {

AddCharacterStore.listen(this.onChange);

}

componentWillUnmount() {

AddCharacterStore.unlisten(this.onChange);

}

onChange(state) {

this.setState(state);

}

handleSubmit(event) {

event.preventDefault();

var name = this.state.name.trim();
var gender = this.state.gender;
var wins = this.state.wins;

if (!name) {
  AddCharacterActions.invalidName();
  this.refs.nameTextField.focus();
}

if (!wins) {
  AddCharacterActions.invalidWins();
}

if (!gender) {
  AddCharacterActions.invalidGender();
}

if (name && gender && wins) {
  AddCharacterActions.addCharacter(name, gender, wins);
}

}

render() {

return (
  <div className='container'>
    <div className='row flipInX animated'>
      <div className='col-sm-8'>
        <div className='panel panel-default'>
          <div className='panel-heading'>Add Character</div>
          <div className='panel-body'>
            <form onSubmit={this.handleSubmit.bind(this)}>

              <div className={'form-group ' + this.state.nameValidationState}>
                <label className='control-label'>Character Name</label>
                <input type='text' className='form-control' ref='nameTextField' value={this.state.name}
                       onChange={AddCharacterActions.updateName} autoFocus/>
                <span className='help-block'>{this.state.helpBlock}</span>
              </div>

                <div>
                    <h1>    test  !  </h1>
                </div>

                <div className={'form-group ' + this.state.winsValidationState}>

                  <label className='control-label'>Win Vote</label>

                  <input type='number' className='form-control' ref='winsField' value={this.state.wins}
                       onChange={AddCharacterActions.updateWins} />

                <span className='help-block'>{this.state.helpBlock}</span>
              </div>





              <div className={'form-group ' + this.state.genderValidationState}>

                <div className='radio radio-inline'>
                  <input type='radio' name='gender' id='female' value='Female' checked={this.state.gender === 'Female'}
                         onChange={AddCharacterActions.updateGender}/>
                  <label htmlFor='female'>Female</label>
                </div>



                <div className='radio radio-inline'>
                  <input type='radio' name='gender' id='male' value='Male' checked={this.state.gender === 'Male'}
                         onChange={AddCharacterActions.updateGender}/>
                  <label htmlFor='male'>Male</label>
                </div>

              </div>
              <button type='submit' className='btn btn-primary'>Submit</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
);

}
}

export default AddCharacter;