import { Component, Input, Output, ViewChild, EventEmitter, ViewEncapsulation, OnInit, OnChanges, AfterViewInit, NO_ERRORS_SCHEMA } from '@angular/core';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RdComponent } from '../../base/rdComponent';
import { L10n } from '@syncfusion/ej2-base';
import {
  TreeGridModule, TreeGridComponent, ToolbarService, EditService, ResizeService,
  ExcelExportService, PdfExportService, FilterService, CommandColumnService, SortService,
} from '@syncfusion/ej2-angular-treegrid';

export type TreeGridToolbarItem = 'Add' | 'Edit' | 'Update' | 'Delete' | 'Cancel' | 'Search' | 'ExpandAll' | 'CollapseAll' | 'ExcelExport' | 'PdfExport';
export type TreeGridColumnEditType = 'stringedit' | 'numericedit' | 'datepickeredit' | 'dropdownedit' | 'booleanedit' | "";

export interface IColumns {
  field: string,
  headerText: string,
  isPrimaryKey: boolean,
  validationRules: object,
  edit: object,
  editType: TreeGridColumnEditType,
  format: string,
  width: number | string,
  type: any,
  displayAsCheckBox: boolean,
  valueAccessor: any
}

@Component({
  selector: 'rd-tree-grid',
  template: `
    <div class="control-section">
      <ejs-treegrid #treegrid locale="tr-TR" [dataSource]="data" [childMapping]="childPath" [treeColumnIndex]="0" rowHeight="20" style="cursor:pointer"
        [height]="height" [toolbar]="toolbar" [editSettings]="editSettings" [filterSettings]="filterSettings" (dataBound)="dataBound()"
        allowExcelExport="true" allowPdfExport="true" allowResizing="true" allowFiltering="true" allowSorting="true" showColumnMenu="true" enableCollapseAll="true" 
        (queryCellInfo)="customizeCell($event)" (toolbarClick)="toolbarClick($event)" (actionComplete)="actionCompleted($event)" (rowSelected)="onSelect.emit($event)">

        <e-columns>
          <ng-container *ngFor="let item of columns">
            <e-column [field]="item.field" [headerText]="item.headerText" [columns]="item.columns" [isPrimaryKey]="item.isPrimaryKey" [edit]="item.edit" [editType]="item.editType" [valueAccessor]="item.valueAccessor"
              [validationRules]="item.validationRules" [format]="item.format" [width]="item.width" [type]="item.type" [displayAsCheckBox]="item.displayAsCheckBox" [textAlign]="item.textAlign">
            </e-column>
          </ng-container>
          <e-column [headerText]="translate('İşlemler')" width="75" [commands]="operations" *ngIf="isOperationActive"></e-column>
        </e-columns>

      </ejs-treegrid>
    </div>
  `,
  providers: [ToolbarService, EditService, ExcelExportService, PdfExportService, FilterService, CommandColumnService, ResizeService, SortService],
  styleUrls: ["../../css/material.css"],
  encapsulation: ViewEncapsulation.None
})
export class TreeGrid extends RdComponent implements OnInit, OnChanges, AfterViewInit {

  /**
   *  --- ValidationRules --- 
   *   requiredRule = { required: true }
       dateRule = { date: true }
       numericRule = { number: true }
 
   *  --- Edit --- 
   * numericParams = { params: { format: 'n' | 'M/d/y hh:mm a' } }
   * 
   *  --- Format ---
   *  format = { format: 'M/d/y hh:mm a', type: 'dateTime' } || 'yMd'
   * 
   * --- Events ---
   * (expanded), (dataBound)
   */

  @Input("rd-data") data = [];
  @Input("rd-child-path") childPath: string;
  @Input("rd-custom-fields") customFields: Object = {};
  // Update,Cancel - You can save or discard changes by click toolbar Update and Cancel button respectively
  @Input("rd-toolbar") toolbar: Array<TreeGridToolbarItem> = ['ExcelExport', 'PdfExport', 'ExpandAll', 'CollapseAll', 'Search', 'Add', 'Delete', 'Edit', 'Update', 'Cancel'];
  @Input("rd-edit-settings") editSettings: Object = { allowAdding: true, allowEditing: true, allowDeleting: true, mode: 'Row', newRowPosition: 'Child' };
  @Input("rd-filter-settings") filterSettings = { type: "Menu" };
  @Input("rd-hidden-columns") hiddenColumns = []; // field
  @Input("rd-height") height = (window.innerHeight * .6);

  // default    -> <ejs-treegrid [frozenColumns]="frozenColumnEndIndex"> (v-17.4.49) 
  // particular -> <e-column [isFrozen]="item.isFrozen">
  // @Input("rd-frozen-column-index") frozenColumnEndIndex = 0; // columnIndex  

  @Input("rd-columns") columns: Array<IColumns> = [{
    field: "", headerText: "", isPrimaryKey: false, validationRules: {}, edit: {},
    editType: "", format: "", width: "", type: "", displayAsCheckBox: false, valueAccessor: () => { }
  }];
  @Input("rd-operations") operations: Array<Object> = [
    { type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat' } },
    { type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },
    { type: 'Save', buttonOption: { iconCss: 'e-icons e-update', cssClass: 'e-flat' } },
    { type: 'Cancel', buttonOption: { iconCss: 'e-icons e-cancel-icon', cssClass: 'e-flat' } }
  ];

  @Output("rd-onUpdate") onUpdate: EventEmitter<any> = new EventEmitter<any>();
  @Output("rd-onSelect") onSelect: EventEmitter<any> = new EventEmitter<any>();
  @ViewChild('treegrid') public treegrid: TreeGridComponent;

  isOperationActive = true;

  ngOnInit() {
    if (!this.operations.length) this.isOperationActive = false
  }

  ngOnChanges(changes) {
    if (changes.data && this.data.length) this.collapseAll();
  }

  ngAfterViewInit() {
    setTimeout(() => {
      for (let field of this.hiddenColumns) this.treegrid.grid.hideColumns(field, "field");
    }, 10);
  }

  customizeCell(args) {
    if (!this.customFields.hasOwnProperty(args.column.field)) return;

    switch (this.customFields[args.column.field].type) {
      case "regularProgress": this.setProgress(args, true); break;
      case "irregularProgress": this.setProgress(args, false); break;
    }
  }

  actionCompleted(action) {    // ActionTypes -> beginEdit, add, save, delete, cancel
    if (action.requestType == "save" || action.requestType == "delete") {
      this.onUpdate.emit(action);
    }
  }

  collapseAll() {
    setTimeout(() => {
      for (const level of [0, 1, 2, 3, 4]) this.treegrid.collapseAtLevel(level);
    }, 100);
  }

  dataBound() {
    this.treegrid.autoFitColumns();
  }

  toolbarClick(args) {
    switch (args.item.text) {
      case 'PDF':
        this.treegrid.pdfExport();
        break;
      case 'Excel':
        this.treegrid.excelExport();
        break;
    }
  }

  setProgress(args, isRegular: boolean) {
    let fieldVal = args.data[args.column.field];

    if (typeof fieldVal == "string") {
      fieldVal = parseInt(fieldVal.replace(/%/, ""));
    }

    let color;
    let value = Math.abs(fieldVal);
    if (!value) return;

    if (value < 50) color = isRegular ? "#fd397a" : "#0abb87";
    else if (value >= 50 && value < 70) color = "#ffb822";
    else color = isRegular ? "#0abb87" : "#fd397a";

    args.cell.setAttribute('style', 'background-color:' + color + ';color:white');
  }
}

L10n.load({
  'tr-TR': {
    'treegrid': {
      'Add': "Ekle",
      "Edit": "Düzenle",
      "Delete": "Sil",
      "Cancel": "İptal",
      "Update": "Güncelle",
      "Search": "Arama",
      "Save": "Kaydet",
      'EmptyRecord': 'Kayıt Yok',
      'ExpandAll': 'Genişlet',
      'CollapseAll': 'Daralt',
      "Print": "Çıktı",
      "Pdfexport": "PDF",
      "Excelexport": "Excel",
      "Wordexport": "Word",
      "FilterButton": "Filtre",
      "ClearButton": "Temizle",
      "StartsWith": "İle Başlayan",
      "EndsWith": "İle Biten",
      "Contains": "İçerir",
      "Equal": "Eşit",
      "NotEqual": "Eşit Değil",
      "LessThan": "Küçüktür",
      "LessThanOrEqual": "Küçük Eşittir",
      "GreaterThan": "Büyüktür",
      "GreaterThanOrEqual": "Büyük Eşittir",
      "EnterValue": "Girilen Değer",
      "FilterMenu": "Filtre Menüsü",
      "Manage Records": "İşlemler",
      "Autofit all columns": "Tüm Kolonları Genişlet",
      "Autofit this column": "Bu Kolonu Genişlet",
      "Sort Ascending": "Büyükten Küçüğe Sırala",
      "Sort Descending": "Küçükten Büyüğe Sırala",
      "Columns": "Kolonlar",
    },
    "datepicker": {
      "today": "Bugün"
    }
  }
});

@NgModule({
  imports: [TreeGridModule, CommonModule],
  exports: [TreeGrid],
  declarations: [TreeGrid],
  schemas: [NO_ERRORS_SCHEMA]
})
export class RdTreeGridModule { }