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

@Component({
  selector: 'rd-star-rating',
  template: `
    <input type="text" id="starRating" class="rating" [value]="value">
  `
})
export class StarRating extends RdComponent {
  constructor(private script: ScriptLoaderService, private style: StyleLoaderService, private element: ElementRef) {
    super();
    this.style.load(["./assets/css/star-rating.min.css"]);
    this.script.load(["./assets/js/star-rating.min.js"]).then(() => { this.setStarRating() });
  }

  @Input("rd-value") value: number = 0;
  @Input("rd-count") count: number = 5;
  @Input("rd-step") step: number = 1;

  @Output("rd-value-change") valueChange: EventEmitter<Number> = new EventEmitter<Number>();

  setStarRating() {
    this.jQuery(this.element.nativeElement).find("#starRating").rating({
      min: 0,
      max: this.count,
      step: this.step,
      stars: this.count,
      filledStar: '<i class="fas fa-star" style="font-size:3rem"></i>',
      emptyStar: '<i class="far fa-star" style="font-size:3rem"></i>',
      clearButton: '<i class="fas fa-minus-circle" style="font-size:3rem"></i>'
    });

    this.jQuery('.rating').on("change", (e) => this.valueChange.emit(e.target.value));
  }
}