import FilterList from './filterList.jsx';
import React from 'react';
import User from './user.jsx';
import { connect } from 'react-redux';
import { userList, userDelete, userGeneratePassword, userActivate } from '../actions/userActions';

class UserList extends React . Component {
  /** */
  componentWillMount() {
    this.props.dispatch(userList());
    this.setState({
      inactive: false,
      filter: null,
    });
  }

  /** */
  deleteUser(id) {
    let {dispatch} = this.props;
    if(confirm('Weet u het zeker?')) {
      dispatch(userDelete(id)).then(() => {
        dispatch(userList());
      });
    }
  }

  /** */
  handleInactive(e) {
    let { dispatch } = this.props;
    let { inactive, filter } = this.state;

    this.setState({
      inactive: e.target.checked,
      filter,
    });

    dispatch(userList(filter, e.target.checked));
  }

  /** */
  generatePassword(id) {
    let { dispatch } = this.props;

    dispatch(userGeneratePassword(id)).then(() => {
      dispatch(userList());
    });
  }

  /** */
  activateUser(id) {
    let { dispatch } = this.props;

    dispatch(userActivate(id)).then(() => {
      dispatch(userList());
    });
  }

  /**
   *
   */
  handleFilter(data) {
    let { dispatch, params } = this.props;
    let { inactive, filter } = this.state;

    if(data && data.search) {
      this.setState({
        inactive,
        filter: data.search,
      });
    }
    else {
      this.setState({
        inactive,
        filter: null,
      });
    }

    dispatch(userList(data.search, inactive));
  }

  /**
   * Render method
   */
  render() {
    const { users } = this.props;
    let content = (<div className="listContent">
        <p>Geen gebruikers gevonden.</p>
      </div>);
    if(users.size > 0) {
      content = (<div className="listContent">
          <div class="userList">
          {users.map((u) => (<User key={u.id} {...u}
                               handleDelete={this.deleteUser.bind(this, u.id)}
                               handleActivate={this.activateUser.bind(this, u.id)}
                               handleGenerate={this.generatePassword.bind(this, u.id)} />))}
          </div>
        </div>);
    }

    return (
      <div>
        <div className="portalMainForm">
          <div className="screenTitle">Gebruikers</div>
          <div className="formWrapper">
            <div className="formInput filterField">
              <FilterList onFilter={this.handleFilter.bind(this)} />
            </div>
            <div className="formInput checkboxField">
              <label>
                <input onClick={this.handleInactive.bind(this)} type="checkbox" />
                <span>Toon inactieve gebruikers</span>
              </label>
            </div>
          </div>
        </div>
        {content}
      </div>);
  }
}

const mapStateToProps = (state) => {
  return {
    users: state.users
  };
};

export default connect(
  mapStateToProps
)(UserList);