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 { FabMenuView }                    from './FabMenu';

  import { UploadCsv }                      from './UploadCsv';

  import { AddStudent }                     from './addStudent';

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

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

      );
    };
  
  };