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

};