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

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

export enum GridSortingByType {
  Key,
  Property
}
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:[rd-provider]',
  template: `
    <div [ngClass]="{'m-scrollable m-scrollable--track': !!height}" [attr.data-scrollable]="!!height" (scroll)="height ? onScroll($event,'grid') : null" [rd-block]="provider.content.state.waitingForResponse"
      [ngStyle]="{'height':(height && provider.content.state.serviceCalled) ? 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 provider.content.items;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]="provider.content.paging.currentPage" [rd-item-count]="provider.content.paging.totalItemCount"
          [rd-page-size]="provider.content.paging.pageSize" (rd-change)="provider.gotoPage($event)" [rd-additional-page-size]="additionalPageSizeList"
          (rd-page-sizeChange)="provider['pageSize'] = $event;provider.gotoPage(1)">
        </rd-paging>
      </div>
      <div class="m--font-danger" align="center" *ngIf="provider.content.state.responseIsRecieved && !provider.content.paging.totalItemCount">{{warningText}}</div>
    <div>
  `,
  // host: { '(window:scroll)': 'onScroll($event,"window")' },
})
export class GridWithProvider extends RdComponent implements OnChanges, AfterContentInit, OnDestroy {
  @Input("rd-provider") provider: ServiceProviderPagingBase;
  @Input("rd-height") height: number | string;
  @Input("rd-align") align: GridColumnAligns = "left";
  @Input("rd-enableSorting") enableSorting: boolean = false;
  @Input("rd-sortingByType") sortingType: GridSortingByType = GridSortingByType.Key;
  @Input("rd-pre-headers") preHeaders: IMapPreHeader = {};
  @Input("rd-row-style") rowStyle: IMapColumnStyleItem = {};
  @Input("rd-show-paging") showPaging = true;
  @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;

  public uniqueHeaderID;
  public selectedItemString: string = null;
  public refreshBlocker: boolean = false;
  public phColumnIndexList: Array<number> = [];

  private originalList: Array<object> = [];
  private orgListCopied: boolean = false;
  public selectedColumn = null;
  public incrementSorting: boolean = false;
  private providerPrePageSize: number | string;
  private portletFullScreenSubs: Subscription;
  private providerSuccessSubs: 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) {
      portlet.addRefreshListener(() => {
        this.refreshBlocker = true;
        setTimeout(() => this.refreshBlocker = false, 300);
        this.provider.refresh();
      });

      this.portletFullScreenSubs = portlet.fullScreenEvent.subscribe(isFullScreen => {

        if (isFullScreen) {
          this.gridPreHeight = this.height;
          this.providerPrePageSize = this.provider["pageSize"];

          if (this.showPaging) this.provider["pageSize"] = Math.floor(window.innerHeight / 40);
          else this.height = window.innerHeight * .85 + 'px';
        }
        else {
          if (this.showPaging) this.provider["pageSize"] = this.providerPrePageSize;
          else this.height = this.gridPreHeight || "auto";
        }
        if (this.provider.content.state.serviceCalled) this.provider.gotoPage(1);
      })
    }
  }

  ngOnChanges(changes) {
    if (changes.provider) {
      if (!(this.provider instanceof ServiceProviderPagingBase)) {
        this.error("rd-provider is not an instance of ServiceProviderPagingBase");
      }
    }
    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);
        }
      }
    }
  }

  ngAfterContentInit() {
    this.providerSuccessSubs = this.provider["successEvent"].subscribe((content) => {
      this.resetSorting();
      if (content.items.length) {
        setTimeout(() => {
          GridColumnColorScale.colorScalePalette = this.colorScalePalette;
          this.columnColorScale = GridColumnColorScale.init(this.provider.content.response.originalResponse, this.columns);
        }, 500);
      }
    })
  }

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

  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: IGridColumn) {
    if (column == this.selectedColumn) this.incrementSorting = !this.incrementSorting;
    else this.incrementSorting = true;

    this.selectedColumn = column;

    if (!this.orgListCopied) this.originalList = RdLib.objectOperations.deepCopy(this.provider.content.items);
    this.orgListCopied = true;

    if (this.provider.content.items) {
      AppComponent.client.gridWithProviderSortingDelegate(this.provider.content.items, column, this.incrementSorting, this.sortingType);
    }
  }

  toggleSorting(column: IGridColumn) {
    this.enableSorting = !this.enableSorting;
    if (this.enableSorting) this.sortByColumn(column);
    else this.provider.content.items = RdLib.objectOperations.deepCopy(this.originalList);
  }

  resetSorting() {
    this.originalList = [];
    this.selectedColumn = null;
    this.incrementSorting = false;
    this.orgListCopied = false;
  }
}