import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { registerUser } from '../../actions/auth';
import { ButtonToolbar, DropdownButton, MenuItem, FormControl, FormGroup, ControlLabel,
Panel, Button } from 'react-bootstrap';

const form = reduxForm({
  form: 'register',
  validate,
});

const renderField = field => (
  <div>
    <input className="form-control" {...field.input} />
    {field.touched && field.error && <div className="error">{field.error}</div>}
  </div>
);

const panelStyle = {
  'max-width': '520px',
};

const NFLTEAMS = ['Cardinals','Falcons','Ravens','Bills', 'Panthers', 'Bears',
 'Bengals', 'Browns','Cowboys', 'Broncos', 'Lions', 'Packers', 'Texans', 'Colts',
 'Jaguars', 'Chiefs', 'Dolphins', 'Vikings', 'Patriots', 'Saints', 'Giants',
 'Jets', 'Raiders', 'Eagles', 'Steelers', 'Chargers', '49ers', 'Seahawks',
 'Rams', 'Buccaneers', 'Titans', 'Redskins'];

function renderTeamDropDown(team, i) {
  return (
    <option value={team}>{team}</option>
  );
}

function FieldGroup({ id, label, help, inputRef, ...props }) {
  return (
    <FormGroup controlId={id}>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} inputRef={inputRef}/>
      {help && <HelpBlock>{help}</HelpBlock>}
    </FormGroup>
  );
}

function TeamSelector({label, teamarray}) {
  return (
    <FormGroup controlId="formControlsSelect">
      <ControlLabel>{label}</ControlLabel>
      <FormControl componentClass="select" placeholder="select">
        <option value="select"></option>
        {teamarray.sort().map(renderTeamDropDown)}
      </FormControl>
    </FormGroup>
  )

}

function validate(formProps) {
  const errors = {};

  if (!formProps.firstName) {
    errors.firstName = 'Please enter a first name';
  }

  if (!formProps.lastName) {
    errors.lastName = 'Please enter a last name';
  }

  if (!formProps.email) {
    errors.email = 'Please enter an email';
  }

  if (!formProps.password) {
    errors.password = 'Please enter a password';
  }

  return errors;
}

class Register extends Component {
  constructor(props) {
      super(props);

      this.handleClick = this.handleClick.bind(this);
      this.handleFormSubmit = this.handleFormSubmit.bind(this);
      this.handleChange = this.handleChange.bind(this);
    }

  renderTeamDropDown(team, i) {
    return (
      <option value={team}>{team}</option>
    );
  }

  handleFormSubmit(formProps) {
    alert('Text field value is: ' + this.username.value);
    this.props.registerUser(this.username.value);
  }

    handleChange = () => {
    console.log(this.username.value);
  }

  renderAlert() {
    if (this.props.errorMessage) {
      return (
        <div>
          <span><strong>Error!</strong> {this.props.errorMessage}</span>
        </div>
      );
    }
  }

  render() {
    const { handleSubmit } = this.props;

    var inputStyle = {
        width: 175,
      };

    const panelStyle = {
      'max-width': '350px',
      'margin-left': 'auto',
      'margin-right': 'auto',
    };

    const tempStyle = {
      width: '100%',
    }

    const headerStyle = {
      margin: '0 0 15px 0',
    }

    return (
      <div style={tempStyle}>
        <Panel style={panelStyle}>
          <h2 style={headerStyle}>Create account</h2>
          <form>
            <FieldGroup
              id="formControlsText"
              type="text"
              label="Username"
              placeholder="Enter username"
			        inputRef={(input) => { this.username = input; }}
              onChange={this.handleChange}
            />
            <FieldGroup
              id="formControlsText2"
              type="text"
              label="Full name"
              placeholder="Enter full name"
            />
            <FieldGroup
              id="formControlsEmail"
              type="email"
              label="Email"
              placeholder="Enter email"
            />
            <FieldGroup
              id="formControlsPassword"
              type="password"
              label="Password"
            />
            <TeamSelector label="Favorite MLB Team" teamarray={NFLTEAMS}/>
            <TeamSelector label="Favorite NBA Team" teamarray={NFLTEAMS}/>
            <TeamSelector label="Favorite NHL Team" teamarray={NFLTEAMS}/>
            <TeamSelector label="Favorite NFL Team" teamarray={NFLTEAMS}/>
            <Button style={tempStyle} onClick={this.handleFormSubmit}>
              Create your Max Break account
            </Button>
          </form>
        </Panel>
      </div>
    );
  }

  handleClick( evt ) {
    this.refs.mlbDropdown.title = evt;
    console.log(evt);
  }
}

function mapStateToProps(state) {
  return {
    errorMessage: state.auth.error,
    message: state.auth.message,
    authenticated: state.auth.authenticated,
  };
}

export default connect(mapStateToProps, { registerUser })(form(Register));