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 { TeachersTable }                from './view/TeachersTable'

export class TeachersView 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} = this.props.data;
    return (
      <div className="appLayout-box">
          <div className="page-container">
              <div className="page-content">
              <AdminSidebar
                user = {this.props.data.user}
                org = {this.props.data.org}
              />
          {/*end sidebar*/}
                  <div className="content-wrapper">
                      <AdminBreadcrumb />
          {/*content*/}

                      <div className="content has-detached-left">
                          <div className="container-detached">
                              <div className="content-detached">
                                  <Header/>
                                  <TeachersTable
                                    data = {this.props.data}
                                    teachers = {teachers}
                                  />
                                {
                                  /**
                                  <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>
    );
  };

};