import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { getUsersFullList, deleteUser, changeUserStatus } from '../../actions/users';

class UsersList extends Component {

  constructor(props) {
    super(props);
    this.deleteUser = this.deleteUser.bind(this);
    this._actionFormatter = this._actionFormatter.bind(this);
    this._changeUserStatus = this._changeUserStatus.bind(this);
  }

  componentWillMount() {
    this.props.getUsersFullList();
  }

  deleteUser(location) {
    this.props.deleteUser(location)
      .then(() => this.props.getUsersFullList());
  }

  _changeUserStatus(user, newStatus) {
    this.props.changeUserStatus(user, newStatus)
      .then(() => this.props.getUsersFullList());
  }

  _actionFormatter(cell, row) {
    const statusClass = row.realStatus == 1 ? "btn btn-warning btn-actions" : "btn btn-success btn-actions";
    const statusChange = row.realStatus == 1 ? 0 : 1;
    return (
      <div className="btn-group">
        <Link to={`/users/${cell}`} className="btn btn-primary btn-actions">Editar</Link>
        <a href="#" onClick={() => {
          if(window.confirm('¿Estás seguro de eliminar el usuario?')) {
            this.deleteUser(cell);
          }
        }} type="button" className="btn btn-info btn-actions">Eliminar</a>
        <a href="#" onClick={() => {
          if(window.confirm('¿Estás seguro de continuar?')) {
            this._changeUserStatus(cell, statusChange);
          }
        }} type="button" className={statusClass}>Marcar como {row.realStatus == 1 ? 'inactivo' : 'activo'}</a>
      </div>
    );
  }

  _renderTable() {
    return (
      <BootstrapTable
        data={this.props.usersList}
        striped={true}
        hover={true}
        bordered={false}
        search={true}
        pagination={true}
        options={{
          paginationSize: 10,
          noDataText: 'No hay datos para mostrar.'
        }}
      >
        <TableHeaderColumn dataField="company" isKey={true} dataSort={true}>Empresa</TableHeaderColumn>
        <TableHeaderColumn dataField="name" dataSort={true}>Nombre</TableHeaderColumn>
        <TableHeaderColumn dataField="email" dataSort={true}>Email</TableHeaderColumn>
        <TableHeaderColumn dataField="telephone" dataSort={true}>Teléfono</TableHeaderColumn>
        <TableHeaderColumn dataField="status" dataSort={true}>Estado</TableHeaderColumn>
        <TableHeaderColumn width="500" dataField="action" dataFormat={this._actionFormatter} dataSort={true}>Acciones</TableHeaderColumn>
      </BootstrapTable>
    );
  }

  render() {
    return (
      <div>
        <div className="page-breadcrumb">
          <ol className="breadcrumb container">
            <li><Link to='/'>Inicio</Link></li>
            <li><a href="#">Usuarios</a></li>
            <li className="active">Ver Usuarios</li>
          </ol>
        </div>
        <div className="page-title">
          <div className="container">
            <h3>Usuarios</h3>
          </div>
        </div>
        <div id="main-wrapper" className="container">
          <div className="row">
            <div className="col-md-12">
              <div className="panel panel-white">
                <div className="panel-heading clearfix">
                  <h4 className="panel-title"></h4>
                </div>
                <div className="panel-body">
                  <div>
                    {this._renderTable()}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    usersList: state.users.usersList
  }
}

export default connect(mapStateToProps, { getUsersFullList, deleteUser, changeUserStatus })(UsersList);
