import { Component, OnInit } from '@angular/core';
import { RdPopOver } from '../../base/rdPopOver';
import { RdLib } from '../../base/rdLib';
import { Grid } from '../grid/grid';
import { GridWithProvider } from '../grid/gridWithProvider';
import { ServiceProviderClientSide } from '../serviceProvider/serviceProviderClientSide';
import { ServiceProviderServerSide } from '../serviceProvider/serviceProviderServerSide';

@Component({
  template: `
    <div class="row">
      <div class="col-md-9">
        <rd-input-text [(rd-model)]="text" rd-onInitialized-focus="true" [rd-placeholder]="placeholder" (rd-keyUp)="filter($event)"></rd-input-text>
      </div>

      <div class="col-md-2">
        <rd-button rd-size="small" rd-icon="fas fa-history" rd-color="yellow" rd-tooltip="Reset" (rd-click)="reset()"></rd-button>
      </div>
    </div>
  `
})
export class PopoverGridSearchOnData extends RdPopOver implements OnInit {

  text: string;
  grid: Grid | GridWithProvider;
  orginalList = [];

  placeholder = RdLib.localization.translateEn("Search Text");

  ngOnInit() {
    this.shading = false;
  }

  onOpen = function (grid: Grid | GridWithProvider) {
    this.grid = grid;

    if (this.grid instanceof Grid) {
      this.orginalList = [...this.grid.originalList];
    }
    else if (this.grid instanceof GridWithProvider) {
      /** ClientSidePagingResponse may have ResultList or not */
      let originalResponse = this.grid.provider.content.response.originalResponse;
      this.orginalList = originalResponse.ResultList ? [...originalResponse.ResultList] : [...originalResponse];
    }
  }

  filter(searchText: string) {
    let filteredList = this.orginalList.filter((item) => {
      for (const value of Object.values(item)) {
        item.isMatched = false;

        switch (typeof value) {
          case "string": item.isMatched = this.filterProcess(value.toString(), searchText); break;
          case "number":
            /** for date */
            if (value.toString().length == 14) item.isMatched = this.filterProcess(RdLib.typeOperations.longToString(value), searchText);
            else item.isMatched = this.filterProcess(value.toString(), searchText);
            break;
          case "boolean": item.isMatched = this.filterProcess(value ? "true" : "false", searchText); break;
        }

        if (item.isMatched) break;
      }
      return item.isMatched;
    });

    this.setGridItems(filteredList);
  }

  filterProcess(value: string, searchText: string): boolean {
    return !!value.match(new RegExp(searchText.trim(), 'gi'));
  }

  reset() {
    this.text = null;
    this.setGridItems(this.orginalList, true);
  }

  setGridItems(list: Array<object>, reset?: boolean) {
    if (this.grid instanceof Grid) {
      this.grid.items = list;
      this.grid.gotoPage(1);
    }
    else if (this.grid instanceof GridWithProvider) {
      if (this.grid.provider instanceof ServiceProviderClientSide) {
        this.grid.provider.content.response.allItems = list;
        this.grid.provider.gotoPage(1);
      }
      else if (this.grid.provider instanceof ServiceProviderServerSide) {
        this.grid.provider.content.items = list;
        this.grid.provider.content.paging.totalItemCount = reset ? this.grid.provider.content.response.totalItemCount : list.length;
      }
    }
  }
}


@Component({
  template: `
    <div class="row">
      <div class="col-md-9">
        <rd-input-text [(rd-model)]="text" rd-onInitialized-focus="true" [rd-placeholder]="placeholder" (rd-keyUp)="filter($event)"></rd-input-text>
      </div>

      <div class="col-md-2">
        <rd-button rd-size="small" rd-icon="fas fa-history" rd-color="yellow" rd-tooltip="Reset" (rd-click)="reset()"></rd-button>
      </div>
    </div>
  `
})
export class PopoverGridSearchOnHTML extends RdPopOver implements OnInit {

  text: string;
  grid: Grid | GridWithProvider;
  gridStrList: Array<string>;

  pageSize: number;
  currentPage: number;

  placeholder = RdLib.localization.translateEn("Search Text");

  orginalList = [];
  matchedIndexes = [];

  ngOnInit() {
    this.shading = false;
    this.setGridStr();
  }

  onOpen = function (grid: Grid | GridWithProvider) {
    this.grid = grid;

    this.pageSize = (this.grid instanceof Grid) ? this.grid.pageSize : this.grid.provider.content.paging.pageSize;
    this.currentPage = (this.grid instanceof Grid) ? this.grid.currentPage : this.grid.provider.content.paging.currentPage;

    if (this.grid instanceof Grid) {
      this.orginalList = [...this.grid.originalList];
    }
    else if (this.grid instanceof GridWithProvider) {
      /** ClientSidePagingResponse may have ResultList or not */
      let originalResponse = this.grid.provider.content.response.originalResponse;
      this.orginalList = originalResponse.ResultList ? [...originalResponse.ResultList] : [...originalResponse];
    }
  }

  filter(searchText: string) {
    this.matchedIndexes = [];

    if (!searchText.trim()) this.reset();
    else {
      this.gridStrList.map((item, index) => {
        if (this.filterProcess(item, searchText)) {
          if (this.grid instanceof Grid) {
            this.matchedIndexes.push(((this.currentPage - 1) * this.pageSize) + index);
          }
          else if (this.grid instanceof GridWithProvider) {
            if (this.grid.provider instanceof ServiceProviderClientSide) {
              this.matchedIndexes.push(((this.currentPage - 1) * this.pageSize) + index);
            }
            else if (this.grid.provider instanceof ServiceProviderServerSide) {
              this.matchedIndexes.push(index);
            }
          }
        }
      });

      let filteredList = this.orginalList.filter((item, index) => { return this.matchedIndexes.includes(index) });

      this.setGridItems(filteredList);
    }
  }

  filterProcess(lineString: string, searchText: string): boolean {
    return !!lineString.match(new RegExp(searchText.toLowerCase(), 'gi'));
  }

  reset() {
    this.text = null;
    this.setGridItems(this.orginalList, true);
  }

  setGridStr() {
    setTimeout(() => {
      this.gridStrList = [];
      let trList = this.grid["element"].nativeElement.firstChild.firstChild.children[1].children;

      trList.forEach(tr => {
        let trStr = "";

        tr.children.forEach(td => {
          trStr += td.innerText.toLowerCase() + " ";
        });

        this.gridStrList.push(trStr);
      });
    }, 10);
  }

  setGridItems(list: Array<object>, reset?: boolean) {
    if (this.grid instanceof Grid) {
      this.grid.items = list;
      this.grid.gotoPage(1);
    }
    else if (this.grid instanceof GridWithProvider) {
      if (this.grid.provider instanceof ServiceProviderClientSide) {
        this.grid.provider.content.response.allItems = list;
        this.grid.provider.gotoPage(1);
      }
      else if (this.grid.provider instanceof ServiceProviderServerSide) {
        this.grid.provider.content.items = list;
        this.grid.provider.content.paging.totalItemCount = reset ? this.grid.provider.content.response.totalItemCount : list.length;
      }
    }
  }
}