import { Renderer2, ViewChild, ElementRef, OnChanges, AfterViewInit, RendererStyleFlags2 } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';

export const iconTypes = [
  // _icons-missing.scss
  'arrow-right', 'arrow-left', 'contacts', 'user', 'chat', 'dashboard', 'map-marker', 'reports', 'inventory','phone', 'message', 'key', 
  // _icons-navbar-left.scss
  'help', 
  // _icons-recent.scss
  'analysis-icon', 'arrow-icon', 'audit-icon', 'billing-icon', 'calendar-icon', 'check-drill-icon', 'contacts-icon',
  'dashboard-icon', 'download-icon', 'email-icon', 'enterprise-overview-icon', 'filter-icon', 'inventory-icon', 'live-chat-icon', 'logout-icon', 'menu-icon',
  'no-access-icon', 'no-search-results-icon', 'phone-icon', 'plus-icon', 'profile-icon', 'provisioning-icon', 'reports-icon', 'search-icon', 'service-icon',
  'site-device-icon', 'support-icon', 'ticket-assigned-icon', 'ticket-cancelled-icon', 'ticket-closed-icon', 'ticket-dispatch-icon', 'ticket-entered-icon', 'ticket-escalate-icon',
  'ticket-escalateMiM-icon', 'ticket-finalized-icon', 'ticket-resolveWaiting-icon', 'ticket-scheduled-icon', 'ticket-waiting-customer-icon', 'ticket-waiting-icon', 'ticket-working-icon',
  'tickets-icon', 'x-icon', 'edit_icon', 
  // _icons.scss
  'arrow-2-l', 'arrow-2-r', 'arrow', 'arrow-down', 'calendar', 'clip', 'clock', 'closed', 'list', 'maintenance', 'play', 'search'
] as const;

export type IcomoonIconType = typeof iconTypes[number];

@Component({
  selector: 'onguard-icomoon-icon',
  templateUrl: './icomoon-icon.component.html',
  styleUrls: ['./icomoon-icon.component.scss']
})
export class IcomoonIconComponent implements OnInit, AfterViewInit, OnChanges {

  @Input() type: IcomoonIconType;
  @Input() color?: string;

  @ViewChild('icon') iconElement: ElementRef<HTMLSpanElement>;

  private viewInitialized = false;

  constructor(private renderer: Renderer2) { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    this.viewInitialized = true;
    this.updateColor();
  }
  
  ngOnChanges(): void {
    this.updateColor();
  }

  private updateColor(): void {
    if(this.color && this.viewInitialized) {
      this.renderer.setStyle(this.iconElement.nativeElement, 'color', this.color);
    }
  }

}