import {Component, ElementRef, Input, OnInit} from "@angular/core";
import {IconsService} from "./icons.service";

/**
 * First add your icon to Icon registry, by adding this to your component Module.
 *
 * e.g export class ExampleModule {
 *  constructor(private iconsService: IconsService) {
 *    this.iconsService.registerIcons([arrow_right])
 *  }
 * }
 *
 * */
@Component({
  selector: 'icon',
  template: `
    <span *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
  `
})
export class IconsComponent implements OnInit{
  public svg;
  public style;
  /**
   * True if this icon should have display flex (Optional, Default: false)
   * */
  @Input()
  public flex = false;
  /**
   *
   * Add custom class(es)(Optional)
   * */
  @Input()
  public customClass;
  /**
   * Color of svg (Optional)
   * */
  @Input()
  public fill;
  /**
   * Color of svg stroke (Optional)
   * */
  @Input()
  public stroke;
  /**
   * Size of svg (Default: 1)
   * */
  @Input()
  public ratio = 1;
  /**
   * Name of icon in registry (Required)
   * */
  @Input()
  set name(iconName: string) {
    this.svg = this.iconsService.getIcon(iconName);
  }
  
  constructor(private iconsService: IconsService,
              private elementRef: ElementRef) {}
  
  ngOnInit() {
    this.style = {
      transform: 'scale(' + this.ratio + ')',
      fill: this.fill,
      stroke: this.stroke
    };
    this.elementRef.nativeElement.style = 'line-height: 20px;';
  }
}