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>
    <span *ngIf="!svg && iconName" class="material-icons" [ngClass]="customClass + (type?(' ' + type):'')" [ngStyle]="style">{{iconName}}</span>
  `
})
export class IconsComponent implements OnInit {
  public iconName: string;
  public style;
  /**
   * Custom svg
   */
  @Input()
  public svg;
  /**
   * 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 icon (Default: 1)
   * */
  @Input()
  public ratio = 1;
  /**
   * In case of Material icon only. Type of icon (Optional)
   * */
  @Input()
  public type: "outlined" | "round" | "sharp" | "two-tone" | null = null;
  /**
   * Name of icon in registry (Required)
   * */
  @Input()
  set name(iconName: string) {
    this.iconName = iconName;
    this.svg = this.iconsService.getIcon(iconName);
  }
  
  constructor(private iconsService: IconsService) {}
  
  ngOnInit() {
    if(this.svg) {
      this.style = {
        transform: 'scale(' + this.ratio + ')',
        fill: this.fill,
        stroke: this.stroke
      };
    } else {
      this.style = {
        "font-size.px": this.ratio*20
      };
    }
  }
}