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 { getWarehouse, updateWarehouse, getCompanies, getSupervisors } from '../../actions/warehouses';
  
  class WarehousesEdit extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        success: false
      };
    }
  
    componentWillMount() {
      this.props.getWarehouse(this.props.params.id);
      this.props.getCompanies();
      this.props.getSupervisors();
    }
  
    onSubmit(props) {
      this.props.updateWarehouse(props, this.props.warehouseId)
        .then(() => {
          this.setState({success: true});
          window.scrollTo(0, 0);
        });
    }
  
    _successAlert() {
      if(this.state.success) {
        return (
          <div className="row">
            <div className="col-md-12">
              <div className="alert alert-success">
                La bodega ha sido editada exitosamente. <Link to='/warehouses'>Volver al listado de bodegas.</Link>
              </div>
            </div>
          </div>
        );
      }
    }
  
    render() {
      const { fields: { company, supervisor, email, telephone, address, contact_name }, 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="#">Bodegas</a></li>
              <li className="active">Actualizar Bodega</li>
            </ol>
          </div>
          <div className="page-title">
            <div className="container">
              <h3>Actualizar Bodega</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">Supervisor</label>
                    <CustomSelect
                      {...supervisor}
                      clearable={false}
                      className={'filter-sel'}
                      placeholder={'Buscar supervisor'}
                      noResultsText={'No hay resultados'}
                      options={this.props.supervisorsList}
                    />
                    <span className="text-danger">{supervisor.touched ? supervisor.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">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 className="form-group">
                    <label for="input-Default" className="control-label">Dirección</label>
                    <input type="text" className={`form-control ${address.touched && address.invalid ? 'b-error' : ''}`} id="input-Default" placeholder="Dirección" {...address} />
                    <span className="text-danger">{address.touched ? address.error : ''}</span>
                  </div>
                  <div className="form-group">
                    <label for="input-Default" className="control-label">Contacto</label>
                    <input type="text" className={`form-control ${contact_name.touched && contact_name.invalid ? 'b-error' : ''}`} id="input-Default" placeholder="Contacto" {...contact_name} />
                    <span className="text-danger">{contact_name.touched ? contact_name.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">Actualizar bodega</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </form>
        </div>
      );
    }
  }
  
  function validate(values) {
    const errors = {};
  
    if(!values.email) {
      errors.email = 'Ingresa un email';
    }
  
    if(!values.telephone) {
      errors.telephone = 'Ingresa un teléfono';
    }
  
    if(!values.address) {
      errors.address = 'Ingresa una dirección';
    }
  
    if(!values.contact_name) {
      errors.contact_name = 'Ingresa un nombre de contacto';
    }
  
    return errors;
  }
  
  function mapStateToProps(state) {
    return {
      initialValues: state.warehouses.warehouseDetail,
      warehouseId: state.warehouses.warehouseId,
      companiesList: state.warehouses.companiesList,
      supervisorsList: state.warehouses.supervisorsList
    };
  }
  
  export default reduxForm({
    form: 'EditWarehouseForm',
    fields: ['company', 'supervisor', 'email', 'telephone', 'address', 'contact_name'],
    validate
  }, mapStateToProps, { updateWarehouse, getWarehouse, getCompanies, getSupervisors })(WarehousesEdit);
  