import React, { PropTypes } from 'react';
import { Table } from 'react-bootstrap';
import styles from '../styles.module.css';

class UserRow extends React.Component {
  getUserCellData = () => {
    if (this.props.user.nickname) {
      return `${this.props.user.nickname} (${this.props.user.email})`;
    } else {
      return this.props.user.email;
    }
  }

  getRolesStr = () => {
    if (this.props.user.roles.length > 0) {
      return 'effective permissions';
    }
    return 'none';
  }

  render() {
    return (
      <tr className={styles.UserGroupRow} onClick={this.props.toggleCollapse}>
        <td>{this.getUserCellData()}</td>
        <td>{this.getRolesStr()}</td>
        <td>{this.props.user.permissions}</td>
      </tr>
    );
  }
}

class RoleRow extends React.Component {
  componentDidMount() {
    const { permissions } = this.props;
  }

  getPermissions = () => {

    if (this.props.permissions) {
      return this.props.permissions;
    }
    return 'none';
  }

  render() {
    return (
      <tr className={styles.roleRow}>
        <td />
        <td>{this.props.role}</td>
        <td>{this.getPermissions()}</td>
      </tr>
    );
  }
}

class UserGroupRow extends React.Component {
  getRoleRows = () => {
    const rolePermissions = this.props.rolePermissions;
    const roleRows = [];
    if (this.props.user && this.props.user.roles.length > 0 && rolePermissions && Object.keys(rolePermissions).length > 0) {
      this.props.user.roles.forEach((role) => {
        roleRows.push(<RoleRow role={role} permissions={rolePermissions[role]} key={`${this.props.user.id}-${role}`} />);
      });
    }
    return roleRows;
  }

  render() {
    return (
      <tbody>
        <UserRow user={this.props.user} key={this.props.user.id} />
        {this.getRoleRows()}
      </tbody>
    );
  }

}
//
// class SearchBar extends React.Component {
//   render() {
//     return (
//       <form>
//         <input type="text" placeholder="Search..." />
//       </form>
//     );
//   }
// }

export default class UserPermissionsTable extends React.Component {
  getUserGroupRows = () => {
    const { rolePermissions } = this.props;
    const rows = [];
    this.props.userPermissions.forEach((user) => {
      rows.push(<UserGroupRow user={user} rolePermissions={rolePermissions} key={user.id} />);
    });

    return rows;
  }

  render() {
    const headers = [];
    this.props.headers.forEach((header, i) => {
      headers.push(<th key={i}>{header}</th>);
    });

    return (
      <Table bordered responsive className={styles.expandableTable}>
        <thead>
          <tr>
            {headers}
          </tr>
        </thead>
        {this.getUserGroupRows()}
      </Table>
    );
  }
}

@@ -1825,14 +1825,9 @@
 %0A%0A%7D%0A
-//%0A// 
+%0A
 clas
@@ -1864,19 +1864,17 @@
 onent %7B%0A
-// 
+%0A
   render
@@ -1878,23 +1878,20 @@
 der() %7B%0A
-//
     
- 
 return (
@@ -1891,19 +1891,16 @@
 eturn (%0A
-// 
       %3Cf
@@ -1900,27 +1900,24 @@
      %3Cform%3E%0A
-// 
         %3Cinp
@@ -1959,14 +1959,54 @@
 ..%22 
+onChange=%7B(e) =%3E %7Bthis.props.onChange(e)%7D%7D 
 /%3E%0A
-// 
     
@@ -2019,28 +2019,19 @@
 rm%3E%0A
-//
     
- 
 );%0A
-// 
   %7D%0A
-// 
 %7D%0A%0Ae
@@ -2089,32 +2089,126 @@
 act.Component %7B%0A
+  constructor(props) %7B%0A    super(props);%0A%0A    this.state = %7B%0A      searchInput: ''%0A    %7D%0A  %7D%0A%0A
   getUserGroupRo
@@ -2332,24 +2332,106 @@
 (user) =%3E %7B%0A
+      // if user.nickname %7C%7C user.email contains query input, push; else continue%0A
       rows.p
@@ -2536,32 +2536,213 @@
 turn rows;%0A  %7D%0A%0A
+  onSearchInput = (e) =%3E %7B%0A    e.preventDefault();%0A    this.setState(%7BsearchInput: e.target.value%7D, () =%3E %7B%0A      console.log('search input:', this.state.searchInput);%0A    %7D);%0A  %7D%0A%0A
   render() %7B%0A   
@@ -2875,24 +2875,90 @@
    return (%0A
+      %3Cdiv%3E%0A        %3CSearchBar onChange=%7Bthis.onSearchInput%7D /%3E%0A  
       %3CTable
@@ -3010,24 +3010,26 @@
 ableTable%7D%3E%0A
+  
         %3Cthe
@@ -3046,13 +3046,17 @@
     
+  
 %3Ctr%3E%0A
+  
     
@@ -3079,30 +3079,34 @@
 %7D%0A          
+  
 %3C/tr%3E%0A
+  
         %3C/th
@@ -3110,32 +3110,34 @@
 /thead%3E%0A        
+  
 %7Bthis.getUserGro
@@ -3152,16 +3152,18 @@
 %7D%0A      
+  
 %3C/Table%3E
@@ -3163,16 +3163,29 @@
 /Table%3E%0A
+      %3C/div%3E%0A
     );%0A 

Set up basic search and onChange event