import { Component, Input, ContentChild, TemplateRef, OnChanges } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from '../../base/rdLib';

export type GridColumnTypes = 'column' | 'operations';
export type GridColumnAligns = 'left' | 'right' | 'center';
export type GridColumnColorScales = 'regular' | 'irregular' | 'gradient' | 'reverseGradient' | 'static';

export interface IGridColumns {
  _results: Array<GridColumn>
}
export interface IGridColumn {
  text: string;
  key: string;
  preKey: string;
  type: GridColumnTypes;
  align: GridColumnAligns;
  style: object;
  colorScale: IColorScale;
  template: any; // TemplateRef
}
export interface IColorScale {
  /**
   * regular -> green - yellow - red
   * irregular -> red - yellow - green
   * gradient -> linear-scale a color asc
   * reverseGradient -> linear-scale a color desc
   * static -> single color
   */
  type: GridColumnColorScales;
  color?: string; // gradient -> (rgb), static -> hex | rgb | any
}

@Component({
  selector: 'rd-grid-column',
  template: `
    <ng-content></ng-content>
  `
})
export class GridColumn extends RdComponent implements OnChanges {
  @Input("rd-text") text: string;
  @Input("rd-key") key: string;
  @Input("rd-preKey") preKey: string;
  @Input("rd-type") type: GridColumnTypes = "column";
  @Input("rd-align") align: GridColumnAligns = "left";
  @Input("rd-color-scale") colorScale: IColorScale = { type: null };

  @ContentChild(TemplateRef) template;

  ngOnChanges(changes) {
    if (changes.type && this.type == "operations") this.text = RdLib.localization.translateEn("OPERATIONS");
  }
}