import { CommonModule } from '@angular/common';
import { NgModule, Component, Input, OnInit, AfterViewInit, OnChanges, NO_ERRORS_SCHEMA } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import Handsontable from 'handsontable';
import { HotTableModule, HotTableRegisterer } from '@handsontable/angular';

export type ColumnTypes = 'text' | 'numeric' | 'date' | 'time' | 'checkbox' | 'password' | 'dropdown';

export interface SpreadSheetColumn {
  id: any,
  title: any
  type?: ColumnTypes,
  readOnly?: boolean,
  hashLength?: number, // use for password -> 10
  timeFormat?: string, // use for time -> 'h:mm:ss a'
  dateFormat?: string, // use for date -> 'YYYY-MM-DD',
  correctFormat?: boolean, // force selected date or time format
  source?: Array<any>, // use for dropdown -> ["red","green","blue"]
}

@Component({
  selector: 'rd-spreadsheet',
  template: `
    <hot-table [hotId]="id" [settings]="baseSettings" licenseKey='non-commercial-and-evaluation'></hot-table>
  `
})
export class SpreadSheet extends RdComponent implements OnInit, OnChanges, AfterViewInit {

  @Input("rd-data") data: Array<object>;
  @Input("rd-settings") customSettings: Handsontable.GridSettings;

  public id = "spreadsheet" + Math.random().toFixed(4);
  public instance: Handsontable;
  private searchPlugin;
  private exportPlugin;
  private hotRegisterer = new HotTableRegisterer();

  baseSettings: Handsontable.GridSettings = {
    data: [],
    // columns: [],
    stretchH: 'all',
    search: true,
    formulas: true,
    filters: true,
    rowHeaders: true,
    colHeaders: true,
    dropdownMenu: true,
    columnSorting: true,
    contextMenu: true,
    comments: true,
    width: '100%',
    // height: window.innerHeight * .7,
    manualRowMove: true,
    manualColumnMove: true,
    manualRowResize: true,
    manualColumnResize: true,
    manualColumnFreeze: true,
    autoColumnSize: { useHeaders: true },
    headerTooltips: {
      rows: false,
      columns: true,
      onlyTrimmed: true
    },
    cells: function () {
      return { renderer: "cellBgRenderer" }
    }
  };

  ngOnInit() {
    Handsontable.renderers.registerRenderer("cellBgRenderer", this.cellBgRenderer);
  }

  ngOnChanges(changes) {
    if (changes.customSettings) {
      this.baseSettings = { ...this.baseSettings, ...this.customSettings };
      if (this.instance) this.instance.updateSettings(this.baseSettings);
    }
    if (changes.data && this.instance) this.instance.loadData(this.data);
  }

  ngAfterViewInit() {
    this.instance = this.hotRegisterer.getInstance(this.id);
    this.searchPlugin = this.instance.getPlugin("search");
    this.exportPlugin = this.instance.getPlugin("exportFile");
  }

  //#region Plugins
  search(text) {
    this.searchPlugin.query(text);
    this.instance.render();
  }

  export() {
    this.exportPlugin.downloadFile('csv', {
      bom: false,
      columnDelimiter: ',',
      columnHeaders: false,
      exportHiddenColumns: true,
      exportHiddenRows: true,
      fileExtension: 'csv',
      filename: 'Export-CSV-file_[YYYY]-[MM]-[DD]',
      mimeType: 'text/csv',
      rowDelimiter: '\r\n',
      rowHeaders: true
    });
  }
  //#endregion 

  loadFileData(dataJson) {
    let allHeads = [];
    let parsedData = JSON.parse(dataJson);
    let settings = {
      data: [],
      // columns: [],
      colHeaders: []
    }

    /** Headers */
    for (let item of parsedData) allHeads = allHeads.concat(Object.keys(item));
    settings.colHeaders = Array.from(new Set(allHeads));

    /** Columns */
    /**  when baseSettings -> data : Array<Array> */
    // for (let index in settings.colHeaders) settings.columns.push({ data: index });

    /**  when baseSettings -> data : Array<Object> */
    // for (let col of settings.colHeaders) settings.columns.push({ data: col, type: "text" });

    /** data-complate */
    for (let item of parsedData) {
      let valueArr = [];
      for (let head of settings.colHeaders) {
        if (!item.hasOwnProperty(head)) item[head] = "";
        valueArr.push(item[head]);
      }
      settings.data.push(valueArr);
    }

    this.instance.updateSettings(settings);
  }

  cellBgRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    if (value) td.style.background = '#fff';
    else td.style.background = '#eee';
  }

  formulasInfoTooltip =
    "<ul style='text-align:left'>" +
    "<li>Arithmetic operations such as: <b>+, -, /, *, %, ^</b></li>" +
    "<li>Logical operations such as: <b>AND(), OR(), NOT(), XOR()</b></li>" +
    "<li>Comparison operations such as: <b>=, >, >=, <, <=, <></b></li>" +
    "<li>All JavaScript Math constants such as: <b>PI(), E(), LN10(), LN2(), LOG10E(), LOG2E(), SQRT1_2(), SQRT2()</b></li>" +
    "<li>Error handling: <b>#DIV/0!, #ERROR!, #VALUE!, #REF!, #NAME?, #N/A, #NUM!</b></li>" +
    "<li>String operations such as: <b>&</b> (concatenation eq. =-(2&5) will return -25)</li>" +
    "<li>Relative and absolute cell references such as: <b>A1, $A1, A$1, $A$1</b></li>" +
    "<li>Build-in variables such as: <b>TRUE, FALSE, NULL</b></li>" +
    "</ul>";
}

@NgModule({
  imports: [CommonModule, HotTableModule],
  exports: [SpreadSheet],
  declarations: [SpreadSheet],
  schemas: [NO_ERRORS_SCHEMA]
})
export class RdSpreedSheetModule { }