import { Component, Input, ElementRef, AfterViewInit, OnChanges } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from '../../base/rdLib';

declare const jQuery;

export type PivotFieldItemDataType = 'date' | 'number' | 'string';
export type PivotFieldItemAreaTypes = 'row' | 'column' | 'data' | 'filter';
export type PivotFieldItemSummaryTypes = 'sum' | 'min' | 'max' | 'avg' | 'count' | 'custom';

/** 
 * Sample Data * 
 * {
 *  id:1,
 *  region: "Europe",
 *  country: "Turkey",
 *  city: "Ist",
 *  amount: 1000,
 *  date:"2013/10/24"  
 * }
 * 
 *  Sample Field
 * {
 *  caption: "Region",
 *  dataField: "region", 
 *  dataType: 'date' || 'number' || 'string'
 *  area : 'row' || 'column' || 'data' || 'filter',
 *  summaryType: 'sum' || 'min' || 'max' || 'avg' || 'count' || 'custom'
 * }
 */

export interface IPivotFieldItem {
  caption: string;
  dataField: string;
  dataType: PivotFieldItemDataType;
  summaryType: PivotFieldItemSummaryTypes;
  format: string;
  area: PivotFieldItemAreaTypes;
  isMeasure: boolean;
  selector: (t) => {}
}

@Component({
  selector: 'rd-pivot-grid',
  template: `
    <div id="pivotgrid-chart"></div>
    <div id="pivotgrid"></div>
    <div id="drilldown-popup"></div>
  `
})
export class PivotGrid extends RdComponent implements OnChanges, AfterViewInit {
  @Input("rd-title") title: string;
  @Input("rd-data") data: Array<object> = [];
  @Input("rd-fields") fields: Array<IPivotFieldItem> = [];

  constructor(private element: ElementRef) {
    super();
  }

  gridContainer;
  gridDxElement;

  chartContainer;
  chartDxElement;

  drillDownContainer;
  drillDxElement;

  initialized = false;
  translateEn = RdLib.localization.translateEn;

  ngAfterViewInit() {
    this.gridContainer = jQuery(this.element.nativeElement).find("#pivotgrid");
    this.chartContainer = jQuery(this.element.nativeElement).find("#pivotgrid-chart");
    this.drillDownContainer = jQuery(this.element.nativeElement).find("#drilldown-popup");
    this.render();
  }

  ngOnChanges(changes) {
    if (this.initialized) {
      if (changes.data) this.gridDxElement.option("dataSource", { store: this.data });
      if (changes.fields) this.gridDxElement.option("dataSource", { fields: this.fields });
      this.bindChartToGrid();
    }
  }

  render() {
    if (this.gridContainer[0].clientWidth > 0) {
      this.initialized = true;

      this.gridContainer.dxPivotGrid(this.getGridOptions());
      this.gridDxElement = this.gridContainer.dxPivotGrid('instance');

      this.chartContainer.dxChart(this.getChartOptions());
      this.chartDxElement = this.chartContainer.dxChart("instance");

      this.bindChartToGrid();
    }
  }

  bindChartToGrid() {
    this.gridDxElement.bindChart(this.chartDxElement, {
      dataFieldsDisplayMode: "splitPanes",
      alternateDataFields: false
    });
  }

  getGridOptions() {
    return {
      allowSortingBySummary: true,
      allowSorting: true,
      allowFiltering: true,
      allowExpandAll: true,
      showBorders: true,
      rowHeaderLayout: "tree",
      scrolling: {
        mode: "virtual"
      },
      fieldChooser: {
        enabled: true,
        height: 700,
        applyChangesMode: "onDemand",
        allowSearch: true,
        title: this.translateEn('Field Chooser'),
        texts: {
          allFields: this.translateEn("All Fields"),
          columnFields: this.translateEn("Column Fields"),
          dataFields: this.translateEn("Data Fields"),
          filterFields: this.translateEn("Filter Fields"),
          rowFields: this.translateEn("Row Fields")
        }
      },
      fieldPanel: {
        showColumnFields: true,
        showDataFields: false,
        showFilterFields: true,
        showRowFields: true,
        allowFieldDragging: true,
        visible: true
      },
      export: {
        enabled: true,
        fileName: this.title ? this.title : this.translateEn("Pivot Table")
      },
      dataSource: {
        fields: this.fields,
        store: this.data
      },
      texts: {
        collapseAll: this.translateEn("Collapse All"),
        dataNotAvailable: this.translateEn("Data Not Available"),
        expandAll: this.translateEn("Expand All"),
        exportToExcel: this.translateEn("Export To Excel"),
        grandTotal: this.translateEn("Total"),
        noData: this.translateEn("No Data"),
        removeAllSorting: this.translateEn("Remove All Sorting"),
        showFieldChooser: this.translateEn("Show Field Chooser"),
      },
      onCellClick: function (e) {
        if (e.area == "data") {
          let pivotGridDataSource = e.component.getDataSource(),
            rowPathLength = e.cell.rowPath.length,
            rowPathName = e.cell.rowPath[rowPathLength - 1],
            drillDownDataSource = pivotGridDataSource.createDrillDownDataSource(e.cell);

          this.showDrillDownPopup(drillDownDataSource, rowPathName);
        }
      }.bind(this)
    }
  }

  getChartOptions() {
    jQuery(this.chartContainer).dxChart({
      commonSeriesSettings: {
        type: "bar"
      },
      title: {
        text: this.title,
        font: { size: 14 }
      },
      tooltip: {
        enabled: true,
        customizeTooltip: function (args) {
          return {
            html: args.seriesName + ' : ' + args.originalValue
          };
        }
      },
      size: {
        height: 300
      },
      adaptiveLayout: {
        width: 450
      },
      export: { enabled: true },
    });
  }

  showDrillDownPopup(data, title) {
    let dataFields = [];
    for (let item of this.fields) dataFields.push(item.dataField);

    this.drillDownContainer.dxPopup({
      title: title,
      width: 950,
      height: 500,
      shading: false,
      closeOnOutsideClick: true,
      contentTemplate: function (contentElement) {
        jQuery("<div />").addClass("drill-down").dxDataGrid({
          width: 850,
          height: 450,
          columns: this.dataFields
        }).appendTo(contentElement);
      },
      onShowing: () => {
        jQuery(".drill-down").dxDataGrid("instance").option("dataSource", data);
      },
      onShown: () => {
        jQuery(".drill-down").dxDataGrid("instance").updateDimensions();
      }
    });

    this.drillDxElement = this.drillDownContainer.dxPopup("instance");
    this.drillDxElement.show();
  }
}