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 { PopoverGridFilter } from "../predefinedPages/popoverGridFilter";

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

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

  tooltip = RdLib.localization.translateEn("Grid Filter");

  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();
    AppComponent.instance.popoverInstance.open(this.grid, PopoverGridFilter, this.element, data => { });
  }
}