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

export type CounterColors = "red" | "green" | "blue" | "yellow" | "purple";

@Component({
  selector: "rd-counter",
  template: `
      <div class="widget-thumb"> 
        <div class="widget-thumb-wrap">
          <i [ngClass]="finalizedClass"></i>
          <div class="widget-thumb-body">
            <span id="counter" class="widget-thumb-body-stat" data-counter="counterup" [attr.data-value]="value">0</span>
          </div>
        </div>
      </div>
  `
})
export class Counter 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 | string;
  @Input('rd-color') color: CounterColors;
  @Input('rd-icon') icon: string = "fas fa-question";

  finalizedClass: string = "widget-thumb-icon ";

  ngAfterViewInit() {
    switch (this.color) {
      case "red": this.finalizedClass += "m--bg-danger"; break;
      case "green": this.finalizedClass += "m--bg-success"; break;
      case "blue": this.finalizedClass += "m--bg-info"; break;
      case "yellow": this.finalizedClass += "m--bg-warning"; break;
      case "purple": this.finalizedClass += "m--bg-brand"; break;
      default: this.finalizedClass += "m--bg-danger";
    }

    this.finalizedClass += " " + this.icon;

    this.jQuery(this.element.nativeElement).find("#counter").counterUp({
      delay: 10,
      time: 1000
    });
  }
}