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 { 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="container-detached">
            <div className="">
                <Header/>
                <StudentTable
                data = {this.props.data}
                studentData = {studentData}
                />
              <AddStudent/>
              <UploadCsv />
            </div>
        </div>

      );
    };
  
  };