content: import React, { Component } from 'react';
  import { Link } from 'react-router';
  import { connect } from 'react-redux';
  import { reduxForm } from 'redux-form';
  import Select from 'react-select';
  import CustomSelect from '../common/custom-select';
  import { createUser } from '../../actions/users';
  import { getCompanies } from '../../actions/warehouses';
  
  class UsersAdd extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        result: ''
      };
    }
  
    componentWillMount() {
      this.props.getCompanies();
    }
  
    onSubmit(props) {
      this.props.createUser(props)
        .then(() => {
          if(this.props.creationResult === 'success') {
            this.setState({result: 'success'});
          } else if(this.props.creationResult === 'error') {
            this.setState({result: 'error' });
          }
          window.scrollTo(0, 0);
        });
    }
  
    _successAlert() {
      if(this.state.result === 'success') {
        return (
          <div className="row">
            <div className="col-md-12">
              <div className="alert alert-success">
                El usuario ha sido creado exitosamente. <Link to='/users'>Volver al listado de usuarios.</Link>
              </div>
            </div>
          </div>
        );
      }
      if(this.state.result === 'error') {
        return (
          <div className="row">
            <div className="col-md-12">
              <div className="alert alert-danger">
                {this.props.errorMessage}
              </div>
            </div>
          </div>
        );
      }
    }
  
    render() {
      const { fields: { company, name, email, password, telephone }, handleSubmit } = this.props;
      return (
        <div>
          <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
          <div className="page-breadcrumb">
            <ol className="breadcrumb container">
              <li><Link to='/'>Inicio</Link></li>
              <li><a href="#">Usuarios</a></li>
              <li className="active">Agregar Usuario</li>
            </ol>
          </div>
          <div className="page-title">
            <div className="container">
              <h3>Agregar Usuario</h3>
            </div>
          </div>
          <div id="main-wrapper" className="container">
            {this._successAlert()}
            <div className="row">
              <div className="col-md-6">
                <div className="panel panel-white">
                  <div className="panel-heading clearfix">
                    <h4 className="panel-title">Informaci&oacute;n general</h4>
                  </div>
                  <div className="panel-body">
                    <div className="form-group">
                      <label for="input-Default" className="control-label">Empresa</label>
                      <CustomSelect
                        {...company}
                        clearable={false}
                        className={'filter-sel'}
                        placeholder={'Buscar empresa'}
                        noResultsText={'No hay resultados'}
                        options={this.props.companiesList}
                      />
                      <span className="text-danger">{company.touched ? company.error : ''}</span>
                    </div>
                    <div className="form-group">
                      <label for="input-Default" className="control-label">Nombre</label>
                      <input type="text" className={`form-control ${name.touched && name.invalid ? 'b-error' : ''}`} id="input-Default" placeholder="Nombre" {...name} />
                      <span className="text-danger">{name.touched ? name.error : ''}</span>
                    </div>
                    <div className="form-group">
                      <label for="input-Default" className="control-label">Email</label>
                      <input type="text" className={`form-control ${email.touched && email.invalid ? 'b-error' : ''}`} id="input-Default" placeholder="Email" {...email} />
                      <span className="text-danger">{email.touched ? email.error : ''}</span>
                    </div>
                    <div className="form-group">
                      <label for="input-Default" className="control-label">Contraseña</label>
                      <input type="password" className={`form-control ${password.touched && password.invalid ? 'b-error' : ''}`} id="input-Default" placeholder="Contraseña" {...password} />
                      <span className="text-danger">{password.touched ? password.error : ''}</span>
                    </div>
                    <div className="form-group">
                      <label for="input-Default" className="control-label">Teléfono</label>
                      <input type="text" className={`form-control ${telephone.touched && telephone.invalid ? 'b-error' : ''}`} id="input-Default" placeholder="Teléfono" {...telephone} />
                      <span className="text-danger">{telephone.touched ? telephone.error : ''}</span>
                    </div>
                  </div>
                </div>
              </div>
  
              <div className="col-md-6">
  
              </div>
  
              <div className="col-md-6">
  
              </div>
  
              <div className="col-md-12">
                <div className="panel panel-white">
                  <div className="panel-body">
                    <button type="submit" className="btn btn-info left">Crear usuario</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </form>
        </div>
      );
    }
  }
  
  function validate(values) {
    const errors = {};
  
    if(!values.name) {
      errors.name = 'Ingresa un nombre';
    }
  
    if(!values.email) {
      errors.email = 'Ingresa un email';
    }
  
    if(!values.password) {
      errors.password = 'Ingresa una contraseña';
    }
  
    if(!values.telephone) {
      errors.telephone = 'Ingresa un teléfono';
    }
  
    return errors;
  }
  
  function mapStateToProps(state) {
    return {
      companiesList: state.warehouses.companiesList,
      creationResult: state.users.creationResult,
      errorMessage: state.users.errorMessage
    };
  }
  
  export default reduxForm({
    form: 'AddUserForm',
    fields: ['company', 'name', 'email', 'password', 'telephone'],
    validate
  }, mapStateToProps, { createUser, getCompanies })(UsersAdd);
  