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 { QueryOperators, Constants } from "../../library/constants";
import { ServiceProviderClientSide } from '../serviceProvider/serviceProviderClientSide';
import { ServiceProviderServerSide } from '../serviceProvider/serviceProviderServerSide';

@Component({
  template: `
    <rd-input-select [(rd-model)]="column" rd-display="text" rd-value="key" [rd-items]="columnItems" [rd-placeholder]="columnPlaceholder" [rd-required]="true"
      (rd-itemSelect)="preKey = $event.preKey;getOperatorByColumnType()">
    </rd-input-select>
    <br>
    <rd-input-select [(rd-model)]="operator" [rd-items]="operatorItems" rd-placeholder="Operator" [rd-required]="true" [rd-disabled]="!column"
      (rd-modelChange)="($event == QueryOperators.Null || $event == QueryOperators.NotNull) ? (value = null) : null">
    </rd-input-select>
    <br>
    <div class="row">
      <div class="col-md-8">
        <rd-input-text [(rd-model)]="value" (rd-onEnter)="filter()" [rd-placeholder]="valuePlaceholder" [rd-required]="(operator != QueryOperators.Null || operator != QueryOperators.NotNull)"
          [rd-disabled]="!column || !operator || operator == QueryOperators.Null || operator == QueryOperators.NotNull">
        </rd-input-text>
      </div>
      <div class="col-md-2" style="padding:0">
        <rd-button rd-size="small" rd-icon="fas fa-search" rd-color="blue" (rd-click)="filter()"
          [rd-disabled]="(!column || !operator) || (operator != QueryOperators.Null && operator != QueryOperators.NotNull && !value)">
        </rd-button>
      </div>
      <div class="col-md-2" style="padding:0">
        <rd-button rd-size="small" rd-icon="fas fa-history" rd-color="yellow" (rd-click)="reset()"></rd-button>
      </div>
    </div>
  `
})
export class PopoverGridFilter extends RdPopOver implements OnInit {

  column;
  operator;
  value;
  preKey;

  queryOperators = [];
  operatorItems = [];
  columnItems = [];

  orginalList = [];
  backupGridWithItemsPageSize;

  grid: Grid | GridWithProvider;
  QueryOperators = QueryOperators;

  columnPlaceholder = RdLib.localization.translateEn("Column");
  valuePlaceholder = RdLib.localization.translateEn("Value");

  ngOnInit() {
    this.shading = false;
    this.queryOperators = Constants.queryOperators();
  }

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

    if (this.grid instanceof Grid) {
      this.orginalList = [...this.grid.items];
      this.backupGridWithItemsPageSize = this.grid.pageSize;
    }
    else if (this.grid instanceof GridWithProvider) {
      if (this.grid.provider instanceof ServiceProviderClientSide) {
        this.orginalList = [...this.grid.provider.content.response.allItems];
      }
      else if (this.grid.provider instanceof ServiceProviderServerSide) {
        this.orginalList = [...this.grid.provider.content.response.items];
      }
    }

    this.columnItems = grid.columns._results.filter((item) => {
      return item.type != "operations"
    }).map((mItem) => {
      return { key: mItem.key, text: mItem.text, preKey: mItem.preKey }
    });
  }

  filter() {
    let filteredList = this.orginalList.filter((item) => {
      if (this.preKey) {
        if (this.filterProcess(item[this.preKey][this.column])) return item;
      }
      else {
        if (this.filterProcess(item[this.column])) return item;
      }
    });

    if (this.grid instanceof Grid) {
      this.grid.itemsToShow = filteredList;
      this.grid.items = filteredList; // for paging rd-item-count
      this.grid.pageSize = filteredList.length;
    }
    else if (this.grid instanceof GridWithProvider) {
      this.grid.provider.content.items = filteredList;
      this.grid.provider.content.paging.pageSize = filteredList.length;
      this.grid.provider.content.paging.totalItemCount = filteredList.length;
    }
  }

  filterProcess(columnValue): boolean {
    if (columnValue == null || columnValue == undefined) return false;
    if (this.operator != QueryOperators.Null && this.operator != QueryOperators.NotNull) {
      if (typeof columnValue == "string") {
        columnValue = columnValue.toLowerCase();
        this.value = this.value.toString().toLowerCase();
      }
      else if (typeof columnValue == "number") {
        this.value = parseInt(this.value);
      }
    }

    switch (this.operator) {
      case QueryOperators.Equals:
        return columnValue == this.value;
      case QueryOperators.NotEquals:
        return columnValue != this.value;
      case QueryOperators.GreaterThan:
        return columnValue > this.value;
      case QueryOperators.GreaterEquals:
        return columnValue >= this.value;
      case QueryOperators.SmallerThan:
        return columnValue < this.value;
      case QueryOperators.SmallerEquals:
        return columnValue <= this.value;
      case QueryOperators.Like:
        return columnValue.includes(this.value);
      case QueryOperators.NotLike:
        return !columnValue.includes(this.value);
      case QueryOperators.Null:
        return columnValue == null;
      case QueryOperators.NotNull:
        return columnValue != null;
      case QueryOperators.StartsWith:
        return columnValue.startsWith(this.value);
      case QueryOperators.EndsWith:
        return columnValue.endsWith(this.value);
      case QueryOperators.True:
      case QueryOperators.False:
        return !!columnValue;
    }
  }

  getOperatorByColumnType() {
    let columnValue;

    for (const item of this.orginalList) { // get first columnValue that has value
      if (this.preKey && (item[this.preKey][this.column] != null || item[this.preKey][this.column] != undefined)) {
        columnValue = item[this.preKey][this.column];
        break;
      }
      else if (item[this.column] != null || item[this.column] != undefined) {
        columnValue = item[this.column];
        break;
      }
    }

    let typeofValue = typeof columnValue;

    this.operatorItems = this.queryOperators.filter((item) => {
      return item.validTypes.includes(typeofValue)
    })
  }

  reset() {
    this.column = null;
    this.operator = null;
    this.value = null;

    if (this.grid instanceof Grid) {
      this.grid.items = this.orginalList;
      this.grid.pageSize = this.backupGridWithItemsPageSize;
      this.grid.gotoPage(1);
    }
    else if (this.grid instanceof GridWithProvider) {
      let currentPage;
      let pageSize = this.grid.provider["pageSize"];
      this.grid.provider.content.paging.pageSize = this.grid.provider["pageSize"];

      if (this.grid.provider instanceof ServiceProviderClientSide) {
        currentPage = this.grid.provider.content.paging.currentPage;
        this.grid.provider.content.paging.totalItemCount = this.grid.provider.content.response.allItems.length;
      }
      else if (this.grid.provider instanceof ServiceProviderServerSide) {
        currentPage = 1;
        this.grid.provider.content.paging.totalItemCount = this.grid.provider.content.response.totalItemCount;
      }

      this.grid.provider.content.items = this.orginalList.slice((currentPage - 1) * pageSize, currentPage * pageSize);
    }
  }
}