import { Component, OnInit, OnDestroy } from '@angular/core';

// import Spreadsheet from 'x-data-spreadsheet';

import * as $ from 'jquery';

// using external js modules in Angular
declare var Slick: any;

@Component({
  selector: 'app-jexcel',
  templateUrl: './jexcel.component.html',
  styleUrls: ['../../../../../../node_modules/bootstrap/dist/css/bootstrap.min.css']
})
export class JExcelComponent implements OnInit, OnDestroy {

  // public data = {
  //   rows: {
  //     0: {
  //       cells: {
  //         0: { text: 'Google' }
  //       }
  //     },
  //     1: {
  //       cells: {
  //         0: { text: 'Apple' }
  //       }
  //     },
  //     2: {
  //       cells: {
  //         0: { text: 'Yahoo' }
  //       }
  //     }
  //   }
  // };

  public options: any = {};

  constructor() { }

  ngOnInit() {
    // /* generate worksheet */
    // const ws: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(this.data);

    // /* generate workbook and add the worksheet */
    // const wb: XLSX.WorkBook = XLSX.utils.book_new();
    // XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    // /* save to file */
    // XLSX.writeFile(wb, 'SheetJS.xlsx');
    // this.options = {
    //   showToolbar: false,
    //   showGrid: true,
    //   showContextmenu: false,
    //   view: {
    //     height: () => document.documentElement.clientHeight,
    //     width: () => document.documentElement.clientWidth
    //   },
    //   row: {
    //     len: 20
    //   },
    //   col: {
    //     len: 4
    //   },
    //   style: {
    //     bgcolor: '#ffffff',
    //     align: 'left',
    //     valign: 'middle',
    //     textwrap: false,
    //     strike: false,
    //     underline: false,
    //     color: '#0a0a0a',
    //     font: {
    //       name: 'Helvetica',
    //       size: 10,
    //       bold: false,
    //       italic: false,
    //     }
    //   }
    // };
    // const s = new Spreadsheet('#x-spreadsheet-demo', this.options)
    //   .loadData(this.data) // load data
    //   .change(data => {
    //     console.log('data : ', data);
    //     console.log('data : ', this.data);
    //   });

    let grid;
    const columns = [
      { id: 'title', name: 'Title', field: 'title', editor: Slick.Editors.Text },
      { id: 'duration', name: 'Duration', field: 'duration', editor: Slick.Editors.Text },
      { id: '%', name: '% Complete', field: 'percentComplete', editor: Slick.Editors.Text },
      { id: 'start', name: 'Start', field: 'start', editor: Slick.Editors.Text },
      { id: 'finish', name: 'Finish', field: 'finish', editor: Slick.Editors.Text },
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', editor: Slick.Editors.Text }
    ];

    const options = {
      enableCellNavigation: true,
      enableColumnReorder: false,
      editable: true,
      enableAddRow: true,
      asyncEditorLoading: false,
      autoEdit: false
    };

    const data = [];

    $(document).ready(() => {
      for (let i = 0; i < 500; i++) {
        const d = (data[i] = {});
        d['title'] = 'Task ' + i;
        d['description'] = 'This is a sample task description.\n  It can be multiline';
        d['duration'] = '5 days';
        d['percentComplete'] = Math.round(Math.random() * 100);
        d['start'] = '01/01/2009';
        d['finish'] = '01/05/2009';
        d['effortDriven'] = (i % 5 === 0);
      }

      grid = new Slick.Grid('#myGrid', data, columns, options);

      // grid.setSelectionModel(new Slick.CellSelectionModel());
      // grid.onAddNewRow.subscribe((e, args) => {
      //   const item = args.item;
      //   grid.invalidateRow(data.length);
      //   data.push(item);
      //   grid.updateRowCount();
      //   grid.render();
      // });

      // grid.onDblClick.subscribe((e, args) => {
      //   console.log('e : ', e);
      //   console.log('args : ', args);
      // });
    });
  }

  ngOnDestroy() { }

  // public onFileChange(evt: any) {
  //   /* wire up file reader */
  //   const target: DataTransfer = <DataTransfer>(evt.target);
  //   if (target.files.length !== 1) { throw new Error('Cannot use multiple files'); }
  //   const reader: FileReader = new FileReader();
  //   reader.onload = (e: any) => {
  //     /* read workbook */
  //     const bstr: string = e.target.result;
  //     const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });

  //     /* grab first sheet */
  //     const wsname: string = wb.SheetNames[0];
  //     const ws: XLSX.WorkSheet = wb.Sheets[wsname];

  //     /* save data */
  //     this.data = (XLSX.utils.sheet_to_json(ws, { header: 1 }));
  //   };
  //   reader.readAsBinaryString(target.files[0]);
  // }

  public test() {
    // this.options.row.len = this.options.row.len + 1;
    // console.log('options : ', this.options);
    // new Spreadsheet('#x-spreadsheet-demo', this.options)
    //   .loadData(this.data);
  }
}