import _                                  from 'lodash';
  import { Meteor }                         from 'meteor/meteor';
  
  import React, { Component }               from 'react';
  import { Link,browserHistory }            from 'react-router';

  import { Navbar,Modal, Nav, NavItem,
    Glyphicon, Collapse, FormGroup, FormControl, Panel,
    NavbarToggler, NavbarBrand, Table, ButtonToolbar,
    NavLink, DropdownItem, DropdownToggle, DropdownMenu,
    NavDropdown, MenuItem, Breadcrumb, Button }                 from 'react-bootstrap';

  import { StudentTable }                   from './view/StudentTable';

  import { Header }                         from '../Header';
  import { AdminSidebar }                   from '../Sidebar'
  import { AdminBreadcrumb }                from '../Breadcrumb'

  import { UploadCsv }                      from './UploadCsv';

  import { AddStudent }                     from './add/addStudent';

  import { Students }                       from '/imports/collections/students/index';

  import './student.css'

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

        show: false,
        firstNameSearch: "",
        lastNameSearch: "",

      };
      this.showModal = this.showModal.bind(this);
      this.hideModal = this.hideModal.bind(this);
      this.onUpdate = this.onUpdate.bind(this);
    };
  
      showModal() {
        this.setState({show: true});
      }
  
      hideModal() {
        this.setState({show: false});
      }
    onUpdate(key, value) {
      this.setState({[key]: value});
    };
  
    render() {

      firstNameSearch = this.state.firstNameSearch;

      lastNameSearch = this.state.lastNameSearch;

      var students =_.filter(this.props.data.students,function(item){

        if(item.firstName){
            return _.includes(item.firstName.toLowerCase(),firstNameSearch.toLowerCase());
        }

      });

      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="">

                                      <Header/>
                                      <StudentTable
                                      data = {this.props.data}
                                      students = {students}
                                      />
                                    <AddStudent/>
                                    <UploadCsv />
                                  </div>
                              </div>

                          </div>
                      </div>
                  </div>
              </div>
          </div>

      );
    };
  
  };