import _                                  from 'lodash';
  import { Meteor }                         from 'meteor/meteor';

  import './student.css'

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

  import { AddStudentFormContainer }               from './AddStudentFormContainer';

  
  const style = {
    margin: 12,
  };
  export class AddStudent 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 (

        <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>

              <AddStudentFormContainer />

            </Modal.Body>
            <Modal.Footer>
              <Button onClick={this.hideModal}>Close</Button>
            </Modal.Footer>
          </Modal>
        </ButtonToolbar>

      );
    };
  
  };