import { Component, OnInit, OnDestroy, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlValueAccessor, Validator, AbstractControl } from '@angular/forms';

declare var $: any;
import '../../../../node_modules/jexcel/dist/js/jexcel';
import '../../../../node_modules/jexcel/dist/js/jquery.jexcel';
import '../../../../node_modules/jexcel/dist/js/jquery.jcalendar';
import '../../../../node_modules/jexcel/dist/js/jquery.jdropdown';
import '../../../../node_modules/jexcel/dist/js/jexcel-formulas';
import '../../../../node_modules/jexcel/dist/js/jquery.csv.min';

import { DateFormatPipe } from '../pipe/date-format.pipe';
import { JExcelColumn, JExcelError, JExcel, JExcelOptions } from './jexcel';
import { ObjectHelper } from '../helper/object-helper';

import { TranslateService } from '@ngx-translate/core';

import * as lodash from 'lodash';

export const JEXCEL_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => JExcelComponent),
  multi: true
};

export const JEXCEL_INPUT_VALIDATORS_ACCESSOR: any = {
  provide: NG_VALIDATORS,
  useExisting: forwardRef(() => JExcelComponent),
  multi: true,
};

@Component({
  selector: 'app-jexcel',
  templateUrl: './jexcel.component.html',
  providers: [
    JEXCEL_CONTROL_VALUE_ACCESSOR,
    JEXCEL_INPUT_VALIDATORS_ACCESSOR
  ]
})
export class JExcelComponent implements ControlValueAccessor, Validator, OnDestroy {

  @Input()
  public get id(): string { return this._id; }
  public set id(id: string) { this._id = id; }
  private _id: string;

  @Input()
  public get columns(): JExcelColumn[] { return this._columns; }
  public set columns(columns: JExcelColumn[]) { this._columns = columns; }
  public _columns: JExcelColumn[] = null;

  @Input()
  public get options(): JExcelOptions { return this.options; }
  public set options(options: JExcelOptions) { this._options = options; }
  public _options: JExcelOptions = {};

  public data: any[] = [];
  public errors: JExcelError[] = [];
  public onchange: EventEmitter<any[]>;
  public translate: boolean = true;

  private configuration: JExcel;
  private dateFormatPipe: DateFormatPipe;
  private defaultColumnWidth: number = 100;
  private defaultColumnType: any = { type: 'text' };
  private onchangeEvent: Function;

  constructor(
    private translateService: TranslateService
  ) {
    this.id = 'app-jexcel';
    this.dateFormatPipe = new DateFormatPipe();

    this.options = {
      editable: true,
      columnResize: true,
      allowInsertRow: false,
      allowManualInsertRow: false,
      allowInsertColumn: false,
      allowManualInsertColumn: false,
      allowDeleteRow: false,
      allowDeleteColumn: false,
      allowComments: false,
      toolbar: false,
      onchange: undefined
    };

    this.configuration = {
      data: [],
      colHeaders: [],
      colWidths: [],
      columns: []
    };

    this.onchange = new EventEmitter();

    this.onchangeEvent = (obj, cell, val) => {
      this.getValues();
      this.onchange.emit(this.data);
    };
  }

  ngOnDestroy() {
    this.getInstance().jexcel('destroy');
  }

  public propagateChange = (_: any) => { /* do nothing */ };
  public propagateTouch = (_: any) => { /* do nothing */ };

  public writeValue(value: any): void {
    this.data = value;
  }

  public registerOnChange(fn: (_: any) => {}): void {
    this.propagateChange = fn;
  }

  public registerOnTouched(fn: (_: any) => {}): void {
    this.propagateTouch = fn;
  }

  public setDisabledState(isDisabled: boolean): void { }

  public setSpreadsheet(columns: JExcelColumn[], options: JExcelOptions, translate: boolean = true) {
    this.errors = [];
    this.columns = lodash.cloneDeep(columns);
    this.translate = translate;
    this.options = lodash.cloneDeep(options);

    if (ObjectHelper.isEmpty(this.columns)) {
      this.errors.push({ code: 'jexcel.columns.invalid' });
      console.error('JExcel errors : ', this.errors);
    }

    if (this.errors.length === 0) {
      this.initConfiguration();
      this.getInstance().jexcel(this.configuration);
    }
  }

  private getInstance() {
    return $('#' + this.id);
  }

  private initConfiguration() {
    this.configuration.colAlignments = [];
    this.configuration.colHeaders = [];
    this.configuration.colWidths = [];
    this.configuration.columns = [];

    let index = 0;
    for (const column of this.columns) {
      if (ObjectHelper.isEmpty(column)) {
        this.errors.push({ code: 'jexcel.column.required', args: [(index + 1)] });
        console.error('JExcel errors : ', this.errors);
        break;
      }

      // Header text
      if (ObjectHelper.isEmpty(column.headerText)) {
        // TODO : set content alert LOL!
        this.errors.push({ code: 'jexcel.header.required', args: [(index + 1)] });
        console.error('JExcel errors : ', this.errors);
        break;
      } else {
        if (this.translate) {
          this.translateService.get(column.headerText).subscribe(
            (translated) => {
              this.configuration.colHeaders.push(translated);
            }
          );
        } else {
          this.configuration.colHeaders.push(column.headerText);
        }
      }

      // Width
      if (ObjectHelper.isEmpty(column.width)) {
        this.configuration.colWidths.push(this.defaultColumnWidth);
      } else {
        this.configuration.colWidths.push(column.width);
      }

      // Alignment
      if (ObjectHelper.isEmpty(column.alignment)) {
        this.configuration.colAlignments.push('left');
      } else {
        this.configuration.colAlignments.push(column.alignment);
      }

      // Column
      const validColumn = lodash.cloneDeep(column);
      if (ObjectHelper.isEmpty(validColumn.type)) {
        validColumn.type = this.defaultColumnType;
      }
      if (ObjectHelper.isEmpty(validColumn.readOnly)) {
        validColumn.readOnly = false;
      }
      if (validColumn.type === 'dropdown' || validColumn.type === 'autocomplete') {
        validColumn.source.map(item => {
          if (typeof item === 'object') {
            const name = validColumn.sourceKey ? validColumn.sourceKey : (Object.keys(item).find(key => key.indexOf('name') > -1 || key.indexOf('nama') > -1));
            item.oid = item.id;
            item.id = item[name];
          }
        });
        console.log('source : ', validColumn.source);
      }
      this.configuration.columns.push(validColumn);

      // Configuration
      Object.assign(this.configuration, this.options);

      // Data
      this.initData();

      // Event
      this.initEvents();

      index++;
    }
  }

  public getValues() {
    const spreadsheetValues = this.getInstance().jexcel('getData', false) as any[];
    spreadsheetValues.forEach((row: any[], rowIndex: number) => {
      row.forEach((col: any, colIndex: number) => {
        this.data[rowIndex][this.columns[colIndex].columnName] = this.getColValue(this.columns[colIndex], col);
      });
    });
    return this.data;
  }

  private initData() {
    const values: any = [];
    let rowIndex = 0;
    let colIndex = 0;
    for (const obj of this.data) {
      colIndex = 0;
      values[rowIndex] = [];
      for (const column of this.columns) {
        values[rowIndex][colIndex] = obj[column.columnName];
        colIndex++;
      }
      rowIndex++;
    }
    this.configuration.data = values;
  }

  private initEvents() {
    this.options.onchange = this.options.onchange === undefined || this.options.onchange === null ? this.onchangeEvent : this.options.onchange;
  }

  private getColValue(column: JExcelColumn, value): any {
    if (column) {
      if (ObjectHelper.isEmpty(value)) {
        return null;
      } else {
        if (column.type === 'text') {
          return String(value);
        } else if (column.type === 'numeric') {
          return Number(value);
        } else if (column.type === 'calendar') {
          return new Date(value);
        } else if (column.type === 'dropdown' || column.type === 'autocomplete') {
          const objValue = column.source.find(item => {
            if (typeof item === 'object') {
              const name = column.sourceKey ? column.sourceKey : (Object.keys(item).find(key => key.indexOf('name') > -1 || key.indexOf('nama') > -1));
              return item[name] === value;
            } else {
              return item === value;
            }
          });
          return objValue ? objValue : null;
        } else {
          return value;
        }
      }
    }
    return null;
  }

  public update(data: any[]) {
    this.data = lodash.cloneDeep(data);
    console.log('data-param : ', data);
    console.log('data : ', this.data);
    this.initData();
    this.getInstance().jexcel('setData', this.configuration.data, false);
  }

  validate(c: AbstractControl): { [key: string]: any } {
    return null;
  }
}