content:     import React from 'react';
      import PropTypes from 'prop-types';
      import { Link } from 'react-router-dom';
      import { Table, Alert, Button , Col , Modal ,
              Row , Label , ButtonToolbar , ButtonGroup } from 'react-bootstrap';
      import { Meteor } from 'meteor/meteor';
      import moment from 'moment';
      import { createContainer } from 'meteor/react-meteor-data';
      import { Bert } from 'meteor/themeteorchef:bert';
      import Loading from '../../components/Loading/Loading';
      import { Capitalize , JournalMessages , RolesGroup , capFirstLetter ,
               paymentType , sumMeUp , StripRolesFromGroup , GetAllUserRoles} from '../../../modules/utilities';
      import Uploader from '../../components/Uploader/Uploader';
      import Icon from '../../components/Icon/Icon';
      import Journals from '../../../api/Journal/Journal';
      import { _ } from 'meteor/underscore';
      import renderHTML from 'react-render-html';
      import './UserStatus.scss';
  import Journal from '../../../api/Journal/Journal';
  
      
  
      class UserStatus extends React.Component{
        constructor(props){
          super(props);
          this.state= { show: false ,
                        profile : "" , 
                        roles : [] , 
                        userId : "" ,
                        journalName : "",
                        journalId : ""   
                      };
          this.handleRemoveUser= this.handleRemoveUser.bind(this);
          this.handleEdit = this.handleEdit.bind(this);
          this.close = this.close.bind( this );
          this.changeUserRole = this.changeUserRole.bind( this );
          this.deleteRole = this.deleteRole.bind( this );
        }
  
        handleRemoveUser( userId ) {
          const prompt = confirm('Are you sure you want to delete this account');
          if (! prompt ){
            return false;
          }
          Meteor.call('user.deleteUser' , userId , (error) => {
            if (! error ){
              Bert.alert('Account deleted' , 'success');
            }
            else{
              Bert.alert(`There was an error ${error.reason}` , 'danger');
            }
          })
        }
  
        close(){
          this.setState({ show: false });
        }
  
        handleEdit( event , id , roles , profile  ){
            event.preventDefault();
            let journalName
            const journals = Journals.find({$or :[ {"staff.userId" : id } , 
                                                   {"editors.userId" : id } ] }).fetch();
            if ( journals && journals.length ){
               journalName = capFirstLetter(journals[0].journalName);
               const journalId = journals[0]._id;
               this.setState({"journalName" : journalName ,
                              "journalId" : journalId});
            }
            let groupArray = []
            for ( group in roles ) {
              const obj = {}
              obj.key = group;
              obj.value = roles[group]
              groupArray.push( obj )
            }
            this.setState({show : true , 
                           profile : profile , 
                           roles : groupArray ,
                           userId : id ,
            });
        }
  
        changeUserRole( event ){
          event.preventDefault();
          if ( !document.querySelector('input[name="journals"]:checked') ){
            Bert.alert('please select the journal you are creating a role for' , 'danger');
            return;
          }
          const journalId = document.querySelector('input[name="journals"]:checked').value;
          const select = document.getElementById("rolesSelect");
          const role = select.options[select.selectedIndex].text;
          const group = select.options[select.selectedIndex].value;
          const userId = this.state.userId;
          if ( group == "0" ){
            Bert.alert('please select the role' , 'danger')
            return;
          }
          if ( ! journalId ){
            Bert.alert('please select the journal you are creating a role for' , 'danger')
            return;
          }
          const prompt = confirm('Are you sure you change user role');
          if (! prompt ){
            return false;
          }
          Meteor.call('user.changeRoleForUser' , userId , journalId , role , group , (error , response)=>{
              if ( response ){
                this.setState({"show" : false });
                Bert.alert('Role changed successfully' , 'success');
              }
              else{
                Bert.alert( `There was an error ${error}` , 'danger');
              }
          })
        }
  
      deleteRole( group , role ){
         const userId = this.state.userId;
         const journalId = this.state.journalId;
         if ( userId ){
           //remove the role from the user 
          const prompt = confirm('Are you sure you want to remove user role');
          if (! prompt ){
            return false;
          }
           Meteor.call('user.deleteUserRole' , journalId , userId ,role , group , (error , response)=>{
            if ( response ){
              this.setState({"show" : false });
              Bert.alert('Role was deleted successfully' , 'success');
            }
            else{
              Bert.alert( `There was an error ${error}` , 'danger');
            }
        })
         }
      }
  
  
      render(){
        const { loading , users , journals } = this.props;
        const { roles , profile , userId  , show , journalName } = this.state;
        return (!loading ? (users.length ?(
        <div>
         <Table responsive condensed >
          <thead>
            <tr>
              <th>S/N</th>
              <th>Name</th>
              <th>Email</th>
              <th>Account Creation Date</th>
              <th>Status</th>
              <th>User Type</th>
              <th>Action</th>
              
  
            </tr>
           </thead>
          <tbody>
            {users.map(({emails , profile , roles , status , createdAt , _id } , index) => {
               return (
                  <tr key={ index }>
                     <td>{ sumMeUp(index , 1) }</td>
                     <td>{profile && profile.name.first} {profile && profile.name.last}</td>
                     <td>{emails[0].address}</td>
                     <td>{ moment( createdAt ).format('MMMM Do, YYYY [at] hh:mm a')}</td>
                     <td>{status && status.online}
                        <Label bsStyle={status && status.online ? ("success") : "warning" }>
                          { status && status.online ? ('Online') : 'Offline'}
                        </Label>
                     </td>
  
                     <td>
                       { roles && renderHTML(StripRolesFromGroup(roles)) }
                     </td>
  
                     <td>
                       {Meteor.userId() === _id ? "Me" :
                         <ButtonToolbar>
                         <ButtonGroup bsSize="xsmall">
                         <Button
                           bsStyle="danger"
                           onClick={(event)=> this.handleRemoveUser(event , _id)}  >
                           Delete Account
                         </Button>
  
                         <Button
                           bsStyle="success"
                           onClick={(event)=> this.handleEdit(event , _id , roles , profile )}  >
                            Edit Roles
                         </Button>
                          
                         </ButtonGroup>
                       </ButtonToolbar>
                    
                         
                        }
                     </td>
                     <td>
                        <p>
                          
                        </p>
                     </td>
  
                 </tr>
                )
          })}
  
          </tbody>
      </Table>
       <div className="modal-container" style={{ height: 200 }}>
        <Modal
            show={this.state.show}
            onHide={this.close}
            aria-labelledby="contained-modal-title"
          >
            <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title">Edit Roles</Modal.Title>
            </Modal.Header>
            <Modal.Body>
               <p> Name :  {this.state.profile && this.state.profile.title} &nbsp;
                           {this.state.profile && this.state.profile.name.first} &nbsp;
                           {this.state.profile && this.state.profile.name.last}
                </p>
  
              <p>{journalName}</p>
              <p> Roles : <br/>
               {roles && roles.length 
                 && roles.map(({key , value})=> {
                  
                  return (
                    value.length && value.map((role , index )=> {
                      return (
                       <span>
                          <Button key={index}
                            bsSize="xsmall"
                            bsStyle="danger"
                            onClick={()=>this.deleteRole( key , role )}
                            >
                              {Capitalize(role)} || X
                          </Button>
                          <br/>
                       </span>
                      )
                    }))    
                 })}
                </p>
               <p className="selectInput">
                <select className="form-control" id="rolesSelect">
                  <option value="0">Change Role </option>
                  {RolesGroup().map(({group , role } , index)=>{
                   return (
                      <option key={sumMeUp(index , 3455)}value={group}>{role}</option>
                     )
                  })}
                </select>
               </p>
                { journals && journals.length && journals.map(({journalName , _id }, index )=>{
                   return (
                          <div className="radio radio-primary" key={sumMeUp(index , 5556)}>
                            <input type="radio" name="journals" id={index} 
                              value={_id }/>
                            <label htmlFor={index}>
                               { journalName }
                            </label>
                          </div>
                   )
                })}
  
                <p>
                  <Button
                    bsStyle="success"
                    onClick={(event)=>this.changeUserRole( event )}>
                     Change User Role 
                  </Button>
                </p>
              
              
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={this.close}>Close</Button>
            </Modal.Footer>
          </Modal>
        </div>
    </div>
  
      ) : <Alert bsStyle="warning">No users yet!</Alert>)
  
      : <Loading />
    );
  
      }
  }
  
    export default createContainer(() => {
      const subscription = Meteor.subscribe('users.allUsersAndJournals');
      return {
        loading: !subscription.ready(),
        users: Meteor.users.find({}).fetch(),
        journals : Journals.find({}).fetch()
      };
    }, UserStatus);
  