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 { AddStudent }                     from './addStudent';
import { StudentTable }                   from './StudentTable';
import { Header }                         from './Header';
import { FabMenuView }                    from './FabMenu';
import { UploadCsv }                      from './UploadCsv';
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() {
    console.log(this.props);
    firstNameSearch = this.state.firstNameSearch;
    lastNameSearch = this.state.lastNameSearch;
    var students =_.filter(this.props.data.students,function(item){
      return _.includes(item.firstName.toLowerCase(),firstNameSearch.toLowerCase());
    });
    return (
        <div className="appLayout-box">
            <div className="page-container">
                <div className="page-content">
                    <div className="sidebar sidebar-main sidebar-default">
                        <div className="sidebar-content">

                            <div className="sidebar-category sidebar-category-visible">
                                <div className="category-content no-padding">
                                    <Nav className="navigation navigation-main navigation-accordion">
                                        <NavItem className="navigation-header"><span>#schoolname</span> <i className="icon-menu" title="Main pages"></i></NavItem>
                                        <NavItem className="active" eventKey={1} href="#"><i className="icon-home4"></i> <span>Dashboard</span></NavItem>

                                        <NavDropdown eventKey={2} title="Settings" name="Settings" id="setting">
                                            <MenuItem eventKey={2.1}>Information</MenuItem>
                                            <MenuItem eventKey={2.2}>Infrastructure</MenuItem>
                                            <MenuItem eventKey={2.3}>Users</MenuItem>
                                            <MenuItem eventKey={2.4}>Academic Settings</MenuItem>
                                            <MenuItem eventKey={2.5}>Account Configuration</MenuItem>
                                        </NavDropdown>
                                        <NavDropdown eventKey={3} title="Academic" name="Academic" id="academic">
                                            <MenuItem eventKey={3.1}>Layout 1</MenuItem>
                                            <MenuItem eventKey={3.2}>Layout 2</MenuItem>
                                            <MenuItem eventKey={3.3}>Layout 3</MenuItem>
                                            <MenuItem eventKey={3.4}>Layout 4</MenuItem>
                                            <MenuItem eventKey={3.5}>Layout 5</MenuItem>
                                        </NavDropdown>
                                        <NavDropdown eventKey={4} title="Communication" name="Communication" id="communication">
                                            <MenuItem eventKey={4.1}>Primary palett</MenuItem>
                                            <MenuItem eventKey={4.2}>Danger palett</MenuItem>
                                            <MenuItem eventKey={4.3}>Success palett</MenuItem>
                                            <MenuItem eventKey={4.4}>Warning palett</MenuItem>
                                            <MenuItem divider />
                                            <MenuItem eventKey={4.5}>Info palett</MenuItem>
                                            <MenuItem eventKey={4.6}>Info palett</MenuItem>
                                            <MenuItem eventKey={4.7}>Info palett</MenuItem>
                                            <MenuItem eventKey={4.8}>Info palett</MenuItem>
                                        </NavDropdown>
                                        <NavDropdown eventKey={5} title="Finance" name="Finance" id="finance">
                                            <MenuItem eventKey={5.1}>Primary palett</MenuItem>
                                            <MenuItem eventKey={5.2}>Danger palett</MenuItem>
                                            <MenuItem eventKey={5.3}>Success palett</MenuItem>
                                            <MenuItem eventKey={5.4}>Warning palett</MenuItem>
                                            <NavDropdown eventKey={5.5} title="Calumns" id="calumns">
                                                <MenuItem>Success palett</MenuItem>
                                                <MenuItem>Warning palett</MenuItem>
                                            </NavDropdown>
                                        </NavDropdown>

                                        <NavItem eventKey={6} href="#"><i className="icon-file-stats"></i><span> Reports </span></NavItem>
                                        <NavItem eventKey={7} href="#"><i className="icon-design"></i> <span>Examinations</span></NavItem>

                                    </Nav>
                                </div>
                            </div>
                        </div>
                    </div>
            {/*end sidebar*/}
                    <div className="content-wrapper">
                        <div className="page-header page-header-default">
                            <div className="breadcrumb-line">
                                <Breadcrumb>
                                    <Breadcrumb.Item href="#">
                                      <i className="icon-home2 position-left"></i> Users
                                    </Breadcrumb.Item>
                                    <Breadcrumb.Item active href="#">
                                     Setup
                                    </Breadcrumb.Item>
                                </Breadcrumb>

                                <ul className="breadcrumb-elements">
                                    <NavItem href="#"><i className="icon-comment-discussion position-left"></i> Support</NavItem>
                                    <NavDropdown title="Settings" id="setting">
                                        <MenuItem><i className="icon-user-lock"></i> Account security</MenuItem>
                                        <MenuItem><i className="icon-statistics"></i> Analytics</MenuItem>
                                        <MenuItem><i className="icon-accessibility"></i> Accessibility</MenuItem>
                                        <MenuItem divider/>
                                        <MenuItem><i className="icon-gear"></i> All settings</MenuItem>
                                    </NavDropdown>

                                </ul>
                            </div>
                        </div>
            {/*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>
    );
  };

};