// import {UploadCsv } from '/imports/collections/students/UploadCsv'

  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,ControlLabel,HelpBlock,

    FormControl,Glyphicon,Button }          from 'react-bootstrap';

  // import { AddStudentForm }                 from './addStudentForm';

  import { FilesCollection } from 'meteor/ostrio:files';
  const Papa = this.Papa;
  // console.log(this);

  const style = {
    margin: 12,
  };

  function FieldGroup({ id, label, help, ...props }) {
    return (
      <FormGroup controlId={id}>
        <ControlLabel>{label}</ControlLabel>
        <FormControl {...props} />
        {help && <HelpBlock>{help}</HelpBlock>}
      </FormGroup>
    );
  }

  export class UploadCsv 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});
    };

    uploadStudentCsv(e){
      e.preventDefault();
      e.persist();

      var file = $('input[type="file"]').prop("files")[0];
      Papa.parse(file, {

        header: true,
      	complete: function(csvData) {
          console.log("csvData");
          console.log(csvData);
      		if(csvData){

            Meteor.call('student.uploadCsv', csvData, function (error, result) {

              console.log("error");
              console.log(error);
              console.log("result");
              console.log(result);

             })
          }
      	}
      });

    }

  
    render() {

      console.log(this.props);

      return (
        <ButtonToolbar>
          <Button bsStyle="primary" onClick={this.showModal}>
            Upload CSV
          </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>

            <form onSubmit={ (e) => this.uploadStudentCsv(e) } >

            <FieldGroup
              id="formControlsFile"
              type="file"
              label="File"

              help="Upload you CSV here."

            />

            <Button type="submit" bsStyle="default">Upload File</Button>

            </form>

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