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

declare const loadFillGauge; // loadFillGauge(elementId,value,config)

export var defaultConfig = {
  minValue: 0, // The gauge minimum value.
  maxValue: 100,// The gauge maximum value.
  circleThickness: .1, // The outer circle thickness as a percentage of it's radius.
  circleFillGap: .05, // The size of the gap between the outer circle and wave circle as a percentage of the outer circles radius.
  circleColor: "#178BCA", // The color of the outer circle.
  waveHeight: .2, // The wave height as a percentage of the radius of the wave circle.
  waveCount: 1, // The number of full waves per width of the wave circle.
  waveRiseTime: 1000, // The amount of time in milliseconds for the wave to rise from 0 to it's final height.
  waveAnimateTime: 2000, // The amount of time in milliseconds for a full wave to enter the wave circle.
  waveRise: true, // Control if the wave should rise from 0 to it's full height, or start at it's full height.
  waveHeightScaling: true, // Controls wave size scaling at low and high fill percentages. When true, wave height reaches it's maximum at 50% fill, and minimum at 0% and 100% fill. This helps to prevent the wave from making the wave circle from appear totally full or empty when near it's minimum or maximum fill.
  waveAnimate: true, // Controls if the wave scrolls or is static.
  waveColor: "#178BCA", // The color of the fill wave.
  waveOffset: 0, // The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave.
  textVertPosition: .75, // The height at which to display the percentage text withing the wave circle. 0 = bottom, 1 = top.
  textSize: 1, // The relative height of the text to display in the wave circle. 1 = 50%
  valueCountUp: true, // If true, the displayed value counts up from 0 to it's final value upon loading. If false, the final value is displayed.
  displayPercent: true, // If true, a % symbol is displayed after the value.
  textColor: "#045681", // The color of the value text when the wave does not overlap it.
  waveTextColor: "#A4DBf8" // The color of the value text when the wave overlaps it.
}

@Component({
  selector: 'rd-fill-gauge',
  template: ` `,
  styles: [".fillGaugeText { font-family: Helvetica; font-weight: bold }"],
  encapsulation: ViewEncapsulation.None
})
export class FillGauge extends RdComponent implements OnChanges {
  constructor(private element: ElementRef, private script: ScriptLoaderService) {
    super();
    this.script.load(["./assets/js/d3.v3.min.js", "./assets/js/fillGauge.js"]).then(_ => this.setGauge());
    this.uniqueId += (Math.random() * 100).toFixed(0);
  }

  @Input("rd-value") value: number | string;
  @Input("rd-width") width: number | string = "300";
  @Input("rd-height") height: number | string = "250";
  @Input("rd-config") config: object = defaultConfig;

  gauge;
  uniqueId: string = "fillGauge";

  ngOnChanges(changes) {
    if (!this.gauge) return;
    if (changes.value) this.gauge.update(this.value);
    if ((changes.width && this.width) || (changes.height && this.height)) {
      this.setGauge();
    }
  }

  setGauge() {
    if (this.gauge) document.getElementById(this.uniqueId).remove();
    this.jQuery(this.element.nativeElement).append("<svg id=" + this.uniqueId + " width=" + this.width + " height=" + this.height + "></svg>");
    this.gauge = loadFillGauge(this.uniqueId, this.value, { ...defaultConfig, ...this.config });
  }
}