import { Component, Input, ElementRef, Output, EventEmitter, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { ScriptLoaderService } from "../../library/script-loader.service";

export type KnobLineCap = "butt" | "round";
export type KnobRotation = "clockwise" | "anticlockwise";

@Component({
  selector: 'rd-knob',
  template: `
    <input type="text" id="knobElement" />
  `
})
export class Knob extends RdComponent implements AfterViewInit {
  constructor(private element: ElementRef, private script: ScriptLoaderService) {
    super();
    this.script.load(["./assets/js/jquery.knob.js"]);
  }

  @Input("rd-value") value: number = 0;
  @Input("rd-min") min: number = 0;
  @Input("rd-max") max: number = 100;
  @Input("rd-step") step: number = 1;
  @Input("rd-width") width: number | string = "150";
  @Input("rd-height") height: number | string = "200";
  @Input("rd-fgColor") fgColor: string = "#87CEEB";
  @Input("rd-bgColor") bgColor: string = "#EEEEEE";
  @Input("rd-thickness") thickness: number = 0.3;
  @Input("rd-linecap") linecap: KnobLineCap = "butt";
  @Input("rd-readOnly") readOnly: boolean = false;
  @Input("rd-rotation") rotation: KnobRotation = "clockwise";
  @Input("rd-angle-arc") angleArc: number = 360;
  @Input("rd-angel-offset") angeloffSet: number = 0;
  @Input("rd-displayPrevious") displayPrevious: boolean = true;
  @Input('rd-warning-limit') warnLimit: number = 0;
  @Input('rd-error-limit') errLimit: number = 0;
  @Input('rd-scc-color') sccColor = "#A0DCA2";
  @Input('rd-warning-color') warnColor = "#FBC987";
  @Input('rd-error-color') errColor = "#DF7171";

  @Output("rd-change") changeEvent: EventEmitter<number> = new EventEmitter<number>();

  container;

  ngAfterViewInit() {
    this.container = this.jQuery(this.element.nativeElement).find("#knobElement");
    this.jQuery(this.container).val(this.value || 0);
    this.jQuery(this.container).knob(this.getOptions());
    if (this.warnLimit && this.errLimit) this.checkColorByLimit(this.value);
  }

  setfgColor(color: string) {
    this.jQuery(this.container).trigger('configure', { "fgColor": color });
  }

  checkColorByLimit(value: number) {
    if (value <= this.warnLimit) this.setfgColor(this.sccColor);
    else if (value >= this.warnLimit && value < this.errLimit) this.setfgColor(this.warnColor);
    else if (value >= this.errLimit) this.setfgColor(this.errColor);
  }

  getOptions() {
    return {
      'min': this.min,
      'max': this.max,
      "step": this.step,
      "width": this.width,
      "height": this.height,
      "fgColor": this.fgColor,
      "bgColor": this.bgColor,
      "thickness": this.thickness,
      "lineCap": this.linecap,
      "readOnly": this.readOnly,
      "rotation": this.rotation,
      "angleArc": this.angleArc,
      "angleOffset": this.angeloffSet,
      "displayPrevious": this.displayPrevious,
      'release': (value) => {
        this.changeEvent.emit(value);
        if (this.warnLimit && this.errLimit) this.checkColorByLimit(value);
      }
    }
  }
}