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 { AddStudentForm }               from './addStudentForm';
  
  export class StudentDataView extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        show: false
      };
      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() {
      return (
        <div className = "enterPane-box">
        <Panel header="Students Info" bsStyle="primary">
        <Table striped bordered condensed hover>
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
          {
            this.props.data.students.map(function(student, i)
              {
                return(
                  <tr>
                  <td>{i+1}</td>
                  <td>{student.firstName}</td>
                  <td>{student.lastName}</td>
                </tr>
              )
            })
          }
  
            </tbody>
          </Table>
          <ButtonToolbar>
            <Button bsStyle="primary" onClick={this.showModal}>
              Add Student
            </Button>
            <Modal
              {...this.props}
              show={this.state.show}
              onHide={this.hideModal}
              dialogClassName="custom-modal"
            >
              <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-lg">New Student</Modal.Title>
              </Modal.Header>
              <Modal.Body>
                <AddStudentForm />
              </Modal.Body>
              <Modal.Footer>
                <Button onClick={this.hideModal}>Close</Button>
              </Modal.Footer>
            </Modal>
          </ButtonToolbar>
        </Panel>
        </div>
      );
    };
  
  };