import _                                  from 'lodash';
  import { Meteor }                         from 'meteor/meteor';
  
  import React, { Component }               from 'react';
  import { Link,browserHistory }            from 'react-router';
  import { FormGroup,Panel,Table,
    ButtonToolbar,Modal,
    FormControl,Glyphicon,Button }          from 'react-bootstrap';

  import { AddStudent }                     from './addStudent';

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

  import { FabMenuView }                    from './FabMenu';

  import { UploadCsv }                      from './UploadCsv';

  
  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;
      var students =_.filter(this.props.data.students,function(item){

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

      return (
        <div className="content has-detached-left">
  					<div className="container-detached">
  						<div className="content-detached">
              <Header/>
              <StudentTable
              data = {this.props.data}

              students = {students}

              />

            <AddStudent/>

            <UploadCsv />

  				</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>
      );
    };
  
  };