import {Component, Input} from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
    selector: 'showTitle',
    template: `
        <h2 *ngIf="title != undefined">
            <span   *ngIf="title['url'] != undefined && title['url'] != null && title['url'] != ''"
                    class="custom-external">

                <a *ngIf="title['name'] != undefined && title['name'] != ''"
                    href="{{title['url']}}" target="_blank"
                    [innerHTML]="title['name']">
                </a>
                <a *ngIf="title['name'] == undefined || title['name'] == ''"
                    href="{{title['url']}}" target="_blank">
                    [no title available]
                </a>
            </span>
            <span *ngIf="(title['name'] != undefined && title['name'] != '') &&
                    (title['url'] == undefined || title['url'] == null || title['url'] == '')"
                    [innerHTML]="title['name']">
            </span>
            <span *ngIf="(title['name'] == undefined || title['name'] == '') &&
                    (title['url'] == undefined || title['url'] == null || title['url'] == '')"
                     >
                [no title available]
            </span>
        </h2>
        <h2 *ngIf="titleName">
          <span [innerHTML]="titleName"></span>
        </h2>
        <h2 *ngIf="!titleName && !title">
          <span>[no title available]</span>
        </h2>
    `

    })

export class ShowTitleComponent {
  @Input() titleName: string;
  @Input() title: { [key: string]: string };
  @Input() iconClass:string;

  sub: any;

  constructor (private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.queryParams.subscribe(
      params => {
        console.info("onInit showTitle");
      }
    );
  }

  ngOnDestroy() {
    console.info("onDestroy showTitle");
    this.sub.unsubscribe();
  }
}