import { Component, Input, OnChanges } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { RdLib } from '../../base/rdLib';

@Component({
  selector: 'rd-badge',
  template: `
    <div class="m-badge m-badge--wide" [ngStyle]="{'background-color':palette[internalLevel]}">
      <ng-content></ng-content>
    </div>
  `
})
export class Badge extends RdComponent implements OnChanges {
  @Input("rd-level") level: number | string;

  public internalLevel;
  public palette = RdLib.constants.colorPalette("lineer");

  ngOnChanges(changes) {
    if (changes.level) {
      var level = Number(this.level);
      if (isNaN(level) || level < 0 || level > 10 || (level.toString().split('.')[1] || []).length) {
        this.palette = RdLib.constants.colorPalette();
        this.internalLevel = 0;
        console.warn("rd-level only can be (0,1,2,3,4,5,6,7,8,9,10)");
        return;
      }
      this.internalLevel = level;
    }
  }
}