import { Component, Input, ElementRef, OnChanges } from '@angular/core';
import { AppComponent } from '../../app.component';
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from '../../base/rdLib';
import { Grid } from "../grid/grid";
import { GridWithProvider } from "../grid/gridWithProvider";
import { PopoverGridSearchOnData, PopoverGridSearchOnHTML } from "../predefinedPages/popoverGridSearch";

/**
 * method differences
 * data -> search on response
 * html -> search on rendered HTML (for enumerated fields)
 */
export type PortletToolGridSearchMethods = "data" | "html";

@Component({
  selector: "rd-tool:[rd-type=search]",
  template: `
    <span style="cursor:pointer">
      <rd-icon rd-class="fas fa-search" [rd-color]="color" rd-size="porletIconSize" [rd-tooltip]="tooltip" (click)="click($event)"></rd-icon>
    </span>
  `
})
export class PortletToolGridSearch extends RdComponent implements OnChanges {
  constructor(public element: ElementRef) { super(); }

  @Input("rd-grid") grid: Grid | GridWithProvider;
  @Input("rd-method") method: PortletToolGridSearchMethods = "data";
  @Input("rd-color") color: string = "white";

  tooltip = RdLib.localization.translateEn("Search");

  ngOnChanges(changes) {
    if (changes.grid) {
      if (!(this.grid instanceof Grid || this.grid instanceof GridWithProvider)) this.error("rd-grid is not an instance of Grid or GridWithProvider");
    }
  }

  click(event) {
    event.stopPropagation();
    if (this.method == "data") AppComponent.instance.popoverInstance.open(this.grid, PopoverGridSearchOnData, this.element, data => { });
    else AppComponent.instance.popoverInstance.open(this.grid, PopoverGridSearchOnHTML, this.element, data => { });
  }
}