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 { AddTeacher }                     from './add/addTeacher'
  import { UploadCsvTeacher }               from './UploadCsvTeacher'

  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">
                                <div className="content-detached">

                                  <Header
                                    user = {user}
                                    org = {org}
                                  />

                                  <StaffTable

                                      data = {this.props.data}

                                      staff = {staff}

                                    />

                                  <AddTeacher/>
                                  <UploadCsvTeacher />

                                </div>
                            </div>
                            <div className="sidebar-detached affix-top">
                                <div className="sidebar sidebar-default">
                                    <div className="sidebar-content">
  
                                        <div className="sidebar-category">
                                            <div className="category-title">
                                                <span>Advanced Search</span>
                                                <ul className="icons-list">
                                                        <li><a href="#" data-action="collapse"></a></li>
                                                </ul>
                                            </div>

                                            <div className="category-content">
                                                <form action="#">
                                                    <div className="has-feedback has-feedback-left">
                                                        <input type="search" className="form-control"
                                                            value={this.state.firstNameSearch}
                                                            onChange={e=>this.onUpdate('firstNameSearch',e.target.value)}
                                                            placeholder="First Name"
                                                            />
                                                        <div className="form-control-feedback">
                                                            <i className="icon-search4 text-size-base text-muted"></i>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            <div className="category-content">
                                                <form action="#">
                                                    <div className="has-feedback has-feedback-left">
                                                        <input type="search" className="form-control"
                                                            value={this.state.lastNameSearch}
                                                            onChange={e=>this.onUpdate('lastNameSearch',e.target.value)}
                                                            placeholder="Last Name" />
                                                        <div className="form-control-feedback">
                                                            <i className="icon-search4 text-size-base text-muted"></i>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
      );
    };
  
  };