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

/**
 * By default this component uses Material Icons Library to render an icon with
 * a specific @name. For custom icons you should:
 *
 *  - Add your icon in icons.ts and register it to Icon registry, by adding this to your component Module.
 *
 *    e.g export class ExampleModule {
 *      constructor(private iconsService: IconsService) {
 *        this.iconsService.registerIcons([arrow_right])
 *      }
 *    }
 *
 *    If the name of your icon is the same with a Material Icon name, yours will be used instead of the default.
 *
 *  - Custom SVG Icon. Define a variable in your component with an SVG and give it as Input @svg.
 *
 * */
@Component({
  selector: 'icon',
  template: `
    <span #icon *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
    <span  [class.uk-flex]="flex" [ngClass]="customClass">
      <span *ngIf="!svg && iconName" class="material-icons" [ngClass]="type" [ngStyle]="style">{{iconName}}</span>
    </span>
    <span *ngIf="visuallyHidden" class="visually-hidden">{{visuallyHidden}}</span>
  `
})
export class IconsComponent implements AfterViewInit {
  private static DEFAULT_ICON_SIZE  = 20;
  public iconName: string;
  public style;
  /**
   * Custom icon as 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);
  }
  /**
   *
   * */
  @Input()
  public visuallyHidden: string = null;
  @ViewChild("icon")
  public icon: ElementRef;
  
  constructor(private iconsService: IconsService,
              private cdr: ChangeDetectorRef) {}
  
  ngAfterViewInit() {
    if(this.svg) {
      let svg = this.icon.nativeElement.getElementsByTagName('svg').item(0);
      svg.setAttribute("width", (this.ratio*IconsComponent.DEFAULT_ICON_SIZE).toString());
      svg.setAttribute("height", (this.ratio*IconsComponent.DEFAULT_ICON_SIZE).toString());
      this.style = {
        fill: this.fill,
        stroke: this.stroke
      };
    } else {
      this.style = {
        "font-size.px": this.ratio*IconsComponent.DEFAULT_ICON_SIZE
      };
    }
    this.cdr.detectChanges();
  }
}