import { Component, OnInit, Input } from '@angular/core';
import { Item } from '../../../../../../backend/Types/Types';
import { _Tiers } from '../../../../../../backend/Types/Items';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'wowhead',
  template: `
    <span *ngIf="tooltipHtml">
      <ng-template #tooltip>
        <div style="color:white; background-color:black; padding: 7px" [innerHTML]="tooltipHtml">
        </div>
      </ng-template>
      <span 
        [nbPopover]="tooltip" 
        nbPopoverTrigger="hover"
        nbPopoverPlacement="top"> 

        <a target="_blank" [href]="item.url">
            <item [item]="item"></item>
        </a>
      </span>
    </span>
    <span *ngIf="!tooltipHtml">
      <a target="_blank" [href]="item.url">
          <item [item]="item"></item>
      </a>
    </span>
    `,
})
export class FrontcraftWowheadComponent implements OnInit {
  @Input() item: Item
  tooltipHtml : SafeHtml

  constructor(
    private sanitizer: DomSanitizer,
  ) { }

  async ngOnInit() {
    if(this.item.tooltip)
      this.tooltipHtml = this.sanitizer.bypassSecurityTrustHtml(this.item.tooltip)
  }
}