import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Modal from 'react-modal'
import _ from 'lodash'
import Admin from './../admin'
import NewEntity from './new-entity'
import { fetchEntities } from '../actions/index'

const ModalStyles = {
  overlay: {
    background: 'rgba(0, 0, 0, 0.50)'
  },
  content: {
    background: '#F5F6F7',
    margin: 'auto',
    maxWidth: 1000,
    height: 558,
    padding: 0,
    border: 'none'
  }
};

interface UsersIndexProps {
  fetchEntities: any;
  users: any[];
}

interface UsersIndexState extends ComponentState {
  modalOpen: boolean;
  users: any[];
}

class UsersIndex extends React.Component<UsersIndexProps, UsersIndexState> {

  constructor(props) {
    super(props);
    this.state = {
      fetching: true,
      users: [],
      modalOpen: false,
      searchText: "",
      searchProperty: "name"
    };
  }

  componentDidMount() {
    this.props.fetchEntities("users").then(() => {
      this.setState({
        fetching: false,
        users: this.props.users
      });
    });
  }

  clickNew() {
    this.setState({ modalOpen: true });
  }

  closeModal() {
    this.setState({ modalOpen: false });
  }

  redirect(id) {
    window.location.pathname = `admin/users/${id}`;
  }

  reloadUsers() {
    this.setState({
      modalOpen: false,
      fetching: true
    });
    this.props.fetchEntities("users").then(() => {
      this.setState({
        fetching: false,
        users: this.props.users
      });
    });
  }

  render() {
    var filteredUsers = Admin.filterSearchText(this.state.users, this.state.searchText, this.state.searchProperty);
    return(
      <div id="users-index" className="component">
        <div className="clearfix">
          <h1 className="search-box-header">Users</h1>
          { this.renderAddButton() }
          <input className="search-box margin" onChange={ Admin.changeSearchText.bind(this) } value={ this.state.searchText } />
        </div>
        <div className="white-box">
          { Admin.renderSpinner(this.state.fetching) }
          { Admin.renderGrayedOut(this.state.fetching) }
          <table className="admin-table">
            <thead>
              <tr>
                <th><div className={ Admin.sortClass.bind(this)("name") } onClick={ Admin.clickHeader.bind(this, "name") }>Name</div></th>
                <th><div className={ Admin.sortClass.bind(this)("title") } onClick={ Admin.clickHeader.bind(this, "title") }>Title</div></th>
                <th><div className={ Admin.sortClass.bind(this)("team") } onClick={ Admin.clickHeader.bind(this, "team") }>Team</div></th>
                <th><div className={ Admin.sortClass.bind(this)("permission") } onClick={ Admin.clickHeader.bind(this, "permission") }>Permissions</div></th>
              </tr>
            </thead>
            <tbody>
              <tr><td></td><td></td><td></td><td></td></tr>
              { _.sortBy(filteredUsers, [Admin.commonSort.bind(this)]).map((user, index) => {
                return(
                  <tr key={ index } onClick={ this.redirect.bind(this, user.id) }>
                    <td className="name-column">
                      <img className="user-pic" src={ user.imageUrl } />
                      { user.name }
                    </td>
                    <td>
                      { user.title }
                    </td>
                    <td>
                      { user.team }
                    </td>
                    <td>
                      { user.permission }
                    </td>
                  </tr>
                );
              }) }
            </tbody>
          </table>
        </div>
        <Modal isOpen={ this.state.modalOpen } onRequestClose={ this.closeModal.bind(this) } contentLabel="Modal" style={ ModalStyles }>
          <NewEntity
            entityName="user"
            initialEntity={ { name: "", email: "", password: "", title: "", imageUrl: "", permissionId: "", teamId: "" } }
            fetchData={ ["teamIds", "permissionIds"] }
            callback={ this.reloadUsers.bind(this) }
          />
        </Modal>
      </div>
    );
  }

  renderAddButton() {
    if (Admin.currentUser.access >= Admin.permissions["Administrator"]) {
      return(
        <a className={ "orange-button float-button btn" + Admin.renderDisabledButtonClass(this.state.fetching) } onClick={ this.clickNew.bind(this) }>Add User</a>
      );
    } else {
      return null;
    }
  }

  componentDidUpdate() {
    $('.match-height-layout').matchHeight();
  }
}

const mapStateToProps = (reducers, props) => {
  return {
    users: reducers.standardReducer.users
  };
};

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchEntities }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(UsersIndex);