// 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 UploadCsvTeacher 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('teachers.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">Upload Csv</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>
    );
  };

};