import { AfterContentInit, Component, ContentChild, ElementRef, Input, OnChanges, TemplateRef } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { ScriptLoaderService } from '../../library/script-loader.service';
import { StyleLoaderService } from '../../library/style-loader.service';

export interface IProgresPieSettings {
  // first: number; // -> start-value
  // goal: number; // -> end-value
  min: number;
  max: number;
  width: number; // rem
  // size: number; // ??
  barcolor?: string; // hex
  barsize?: number;
  trackcolor?: string; // hex
  fillcolor?: string; // hex
  speed?: number;
  easing?: string; // https://easings.net/
  style?: {
    element: string;
    number: string;
    label: string;
    content: string;
  },
  numberCallback?: Function,
  contentCallback?: Function
}

@Component({
  selector: 'rd-pp-content',
  template: `
    <ng-content></ng-content>
  `
})
export class ProgresPieContent extends RdComponent {
  @ContentChild(TemplateRef) template;
}

@Component({
  selector: 'rd-progress-pie',
  template: `
    <div class="pie_progress" [ngStyle]="settings?.style?.element" [style.width.rem]="settings?.width" role="progressbar">
      <div class="pie_progress__number" [ngStyle]="settings?.style?.number" [hidden]="!showNumberContent"></div>
      <div class="pie_progress__content" [ngStyle]="settings?.style?.content">
        <ng-container [ngTemplateOutlet]="content?.template"></ng-container>
      </div>
    </div>
    `
})
export class ProgressPie extends RdComponent implements OnChanges, AfterContentInit {
  constructor(private element: ElementRef, private _script: ScriptLoaderService, private _style: StyleLoaderService) {
    super();
    this._style.load(["./assets/css/progressPie.min.css"]);
    this._script.load(["./assets/js/progressPie.min.js"]);
  }

  @Input("rd-start-value") startValue;
  @Input("rd-end-value") endValue;
  @Input('rd-settings') settings: IProgresPieSettings;

  @ContentChild(ProgresPieContent) content;

  showNumberContent = true;
  baseSettings: IProgresPieSettings = { min: 0, max: 100, width: 10 };

  ngOnChanges(changes) {
    if (changes.startValue || changes.endValue) {
      this.jQuery(this.element.nativeElement).find(".pie_progress").asPieProgress({
        namespace: 'pie_progress',
        first: this.startValue || 0,
        goal: this.endValue || 0,
        ...this.baseSettings,
        ...this.settings
      }).asPieProgress("reset").asPieProgress("start");
    }
  }

  ngAfterContentInit() {
    if (this.content) this.showNumberContent = false;
  }
}