import React from 'react';
import './UploadQuestion.css';
import Dragger from 'antd/lib/upload/Dragger';
import { InboxOutlined } from '@ant-design/icons';
import { OutTable, ExcelRenderer } from 'react-excel-renderer';


class UploadQuestion extends React.Component {

   constructor(props) {
      super(props);
      this.state = {
         dataLoaded: false,
         rows: null,
         cols: null
      }
      this.fileHandler = this.fileHandler.bind(this);
   }

   fileHandler = (event) => {
      console.log(event);
      let fileObj = event.file.originFileObj;

      ExcelRenderer(fileObj, (err, resp) => {
         if (err) {
            console.log(err);
         }
         else {
            this.setState({
               dataLoaded: true,
               cols: resp.cols,
               rows: resp.rows
            });
         }
      });
   }

   render() {
      return (
         <div> 
            <div>
               <Dragger onChange={this.fileHandler.bind(this)}>
                  <p className="ant-upload-drag-icon">
                     <InboxOutlined />
                  </p>
                  <p className="ant-upload-text">Click or drag file to this area to upload</p>
                  <p className="ant-upload-hint">
                     Support for a single or bulk upload. Strictly prohibit from uploading company data or other
                     band files
                  </p>
               </Dragger>
            </div>
            {this.state.dataLoaded &&
               <div>
                  <OutTable data={this.state.rows} columns={this.state.cols}
                     tableClassName="ExcelTable2007"
                     tableHeaderRowClass="heading" />
               </div>}
         </div>
      )
   };
};

export default UploadQuestion;
