import _                                  from 'lodash';
import { Meteor }                         from 'meteor/meteor';

import React, { Component }               from 'react';
import { Link,browserHistory }            from 'react-router';
import { FormGroup,
  FormControl,Glyphicon,Button }          from 'react-bootstrap';
import { Header }                         from '../Header';
import { AdminSidebar }                   from '../Sidebar'
import { AdminBreadcrumb }                from '../Breadcrumb'
import { StaffTable }                     from './view/StaffTable'
import { AddStaff }                     from './add/addStaff'
import { UploadCsvStaff }               from './UploadCsvStaff'

export class StaffView extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
    this.onUpdate = this.onUpdate.bind(this);
  };

  onUpdate(key, value) {
    this.setState({[key]: value});
  };

  render() {
    const {user, org, staff} = this.props.data;
    return (
      <div className="appLayout-box">
          <div className="page-container">
              <div className="page-content">
              <AdminSidebar
                user = {user}
                org = {org}
              />
                  <div className="content-wrapper">
                      <AdminBreadcrumb />
                      <div className="content has-detached-left">
                          <div className="container-detached">
                          <Header
                            user = {user}
                            org = {org}
                          />
                          <StaffTable
                              data = {this.props.data}
                              staff = {staff}
                            />
                          <AddStaff/>
                          <UploadCsvStaff />
                        </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    );
  };

};