import { Component, Input, ContentChildren, Optional, Inject, forwardRef, OnChanges, OnDestroy, ElementRef } from '@angular/core';
import { Subscription } from "rxjs/internal/Subscription";
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from '../../base/rdLib';
import { GridColumn, IGridColumns } from './gridColumn';
import { Portlet } from '../portlet/portlet';
import { GridColumnColorScale } from './gridColumnColorScale';

export type GridColumnAligns = 'left' | 'right' | 'center';

export interface IPreHeaderItem {
  text: string;
  index: number;
  colspan: number;
  background: string;
}
export interface IMapPreHeader {
  [key: number]: IPreHeaderItem
}
export interface IMapColumnStyleItem {
  [index: number]: object
}
export interface IMapColumnStyle {
  [key: string]: IMapColumnStyleItem // [column.key] : {0:{'color':''}}
}

@Component({
  selector: 'rd-grid:not([rd-provider])',
  template: `
    <div [ngClass]="{'m-scrollable m-scrollable--track': !!height}" [attr.data-scrollable]="!!height" (scroll)="height ? onScroll($event,'grid') : null"
      [ngStyle]="{'height':height ? height : 'auto' }" style="overflow:auto">
      <table class="table table-bordered table-striped table-condensed flip-content table-light" [ngClass]="{'text-left': align == 'left','text-right': align == 'right','text-center': align == 'center'}">
        <thead [id]="uniqueHeaderID" style="background: #fdfdfe;position:relative" [ngStyle]="{'z-index':tHeadZIndex}">
          <tr *ngIf="Object.keys(preHeaders).length">
            <ng-container *ngFor="let h of columns?._results;let index = index">
              <th *ngIf="!phColumnIndexList.includes(index)"></th>
              <th class="text-center" [attr.colspan]="preHeaders[index].colspan" style="line-height: .3 !important"
                [ngStyle]="{'color':'white','border-radius':'1rem','background':preHeaders[index].background || '#716aca'}" *ngIf="preHeaders[index]">
                {{preHeaders[index].text}}
              </th>
            </ng-container>
          </tr>
          <tr class="uppercase">
            <th *ngFor="let column of columns?._results" [ngClass]="{
              'rd-grid-operations': column.type == 'operations','text-left': (align == 'left' || column.align == 'left'),
              'text-right': (align == 'right' || column.align == 'right'),'text-center': (column.align == 'center')}"
              [ngStyle]="{'text-decoration':(enableSorting && selectedColumn == column) ? 'underline' : 'none', 'cursor':column.key ? 'pointer' : 'default',
                'color':(enableSorting && selectedColumn == column) ? (incrementSorting) ? '#FF7676' : '#87CEFA' : '#808080'}"
              (click)="(enableSorting && column.type == 'column' && column.key) ? sortByColumn(column) : null" (dblclick)="(column.type == 'column' && column.key) ? toggleSorting(column) : null">
              <rd-icon rd-class="fas fa-sort-up" rd-color="#FF7676" *ngIf="enableSorting && incrementSorting && selectedColumn == column"></rd-icon>
              <rd-icon rd-class="fas fa-sort-down" rd-color="#87CEFA" *ngIf="enableSorting && !incrementSorting && selectedColumn == column"></rd-icon>
              {{column.text}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of itemsToShow;trackBy:trackByIndex;let rowIndex = index" [ngStyle]="rowStyle[rowIndex] || {}" [ngClass]="{'rd-grid-selected': selectedItemString === JSON.stringify(item)}">
            <td *ngFor="let column of columns?._results;trackBy:trackByIndex" [ngClass]="{
              'rd-grid-operations': column.type == 'operations',
              'text-left': (align == 'left' || column.align == 'left'),
              'text-right': (align == 'right' || column.align == 'right'),
              'text-center': (column.align == 'center')
              }" [ngStyle]="column.colorScale.type ? columnColorScale[column.key] ? columnColorScale[column.key][rowIndex] : {} : {}">
              <ng-template ngFor [ngForOf]="[item]" [ngForTemplate]="column.template"></ng-template>
            </td>
          </tr>
        </tbody>
      </table>
      <div align="center" *ngIf="showPaging">
        <rd-paging [(rd-current-page)]="currentPage" [rd-item-count]="items?.length" [rd-page-size]="pageSize" [rd-additional-page-size]="additionalPageSizeList"
          (rd-change)="gotoPage($event)" (rd-page-sizeChange)="pageSize = $event;gotoPage(1)">
        </rd-paging>
      </div>
      <div class="m--font-danger" align="center" *ngIf="items && !items.length">{{warningText}}</div>
    <div>
  `,
  // host: { '(window:scroll)': 'onScroll($event,"window")' },
})
export class Grid extends RdComponent implements OnChanges, OnDestroy {
  @Input("rd-items") items: Array<object> = [];
  @Input("rd-page-size") pageSize = 10;
  @Input("rd-show-paging") showPaging = true;
  @Input("rd-height") height: number | string;
  @Input("rd-enableSorting") enableSorting: boolean = false;
  @Input("rd-align") align: GridColumnAligns = "left";
  @Input("rd-row-style") rowStyle: IMapColumnStyleItem = {};
  @Input("rd-pre-headers") preHeaders: IMapPreHeader = {};
  @Input("rd-additional-page-size") additionalPageSizeList: Array<number> = [];
  @Input("rd-warning-text") warningText: string = RdLib.localization.translateEn("No result had found") + ".";
  @Input("rd-color-scale-palette") colorScalePalette = ["#CCFF90", "#B2FF59", "#00E676", "#FFE57F", "#FFFF00", "#FFEA00", "#FF8A80", "#FF5252", "#FF1744"];
  @Input("rd-thead-zIndex") tHeadZIndex = 1;
  
  @ContentChildren(GridColumn) columns: IGridColumns;

  JSON = JSON;
  Object = Object;
  document = document;
  alphabet = RdLib.constants.turkishAlphabet;

  public uniqueHeaderID;
  public currentPage: number = 1;
  public itemsToShow: Array<object> = [];
  public selectedItemString: string = null;
  public phColumnIndexList: Array<number> = [];

  private originalList: Array<object> = [];
  private orgListCopied: boolean = false;
  public selectedColumn: any = null;
  public incrementSorting: boolean = false;
  private prePageSize: number;
  private portletFullScreenSubs: Subscription;
  private gridPreHeight: number | string;

  columnColorScale: IMapColumnStyle = {};

  constructor(@Optional() @Inject(forwardRef(() => Portlet)) portlet: Portlet, public element: ElementRef) {
    super();
    this.uniqueHeaderID = "#header" + Math.random();

    if (portlet) {
      this.portletFullScreenSubs = portlet.fullScreenEvent.subscribe(isFullScreen => {
        if (isFullScreen) {
          this.gridPreHeight = this.height;
          this.prePageSize = this.pageSize;

          if (this.showPaging) this.pageSize = Math.floor(window.innerHeight / 35);
          else this.height = window.innerHeight * .85 + 'px';
        }
        else {
          if (this.showPaging) this.pageSize = this.prePageSize;
          else this.height = this.gridPreHeight || "auto";
        }

        this.gotoPage(1);
      })
    }
  }

  ngOnChanges(changes) {
    if (changes.items || changes.pageSize) {
      if (this.items && this.items.length) {
        this.originalList = [...this.items];
        this.currentPage = this.currentPage > (this.items.length / this.pageSize) ? 1 : this.currentPage;

        setTimeout(() => {
          GridColumnColorScale.colorScalePalette = this.colorScalePalette;
          this.columnColorScale = GridColumnColorScale.init(this.items, this.columns);
        }, 500);
      }
      this.gotoPage(this.currentPage);
    }
    if (this.preHeaders) {
      this.phColumnIndexList = [];

      for (let index of Object.keys(this.preHeaders)) {
        let ph = this.preHeaders[index];
        for (let i = 0; i < ph.colspan; i++) {
          this.phColumnIndexList.push(parseInt(index) + i);
        }
      }
    }
  }

  ngOnDestroy() {
    this.portletFullScreenSubs.unsubscribe();
  }

  gotoPage(page: number) {
    if (!Array.isArray(this.items)) this.itemsToShow = [];
    else this.itemsToShow = this.items.slice((page - 1) * this.pageSize, page * this.pageSize);
  }

  selectItem(item) {
    this.selectedItemString = item ? JSON.stringify(item) : null;
  }

  onScroll = function (event, src) {
    if (src == "window") var translate = "translate(0," + window.pageYOffset + "px)";
    if (src == "grid") var translate = "translate(0," + event.target.scrollTop + "px)";
    this.document.getElementById(this.uniqueHeaderID).style.transform = translate;
  }

  sortByColumn(column) {
    if (column == this.selectedColumn) this.incrementSorting = !this.incrementSorting;
    else this.incrementSorting = true;

    this.selectedColumn = column;

    if (!this.orgListCopied) this.originalList = RdLib.objectOperations.deepCopy(this.itemsToShow);
    this.orgListCopied = true;

    var sampleItem = {};
    if (this.items) {
      for (let elm of this.items) {
        if (elm[column.key]) {
          sampleItem = elm;
          break;
        }
      }

      this.items.sort((a, b) => {
        if (typeof sampleItem[column.key] == 'string') {
          let index1 = a[column.key] ? this.alphabet.indexOf(a[column.key].charAt(0).toLowerCase()) : 0;
          let index2 = b[column.key] ? this.alphabet.indexOf(b[column.key].charAt(0).toLowerCase()) : 0;
          if (index1 > index2) return this.incrementSorting ? 1 : -1;
          if (index1 < index2) return this.incrementSorting ? -1 : 1;
          else return 0;
        }
        else if (typeof sampleItem[column.key] == 'number') {
          if (this.incrementSorting) return a[column.key] - b[column.key];
          else return b[column.key] - a[column.key];
        }
      });
      this.gotoPage(this.currentPage);
    }
  }

  toggleSorting(column) {
    this.enableSorting = !this.enableSorting;
    if (this.enableSorting) this.sortByColumn(column);
    else this.itemsToShow = RdLib.objectOperations.deepCopy(this.originalList);
  }
}