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

@Component({
    selector: 'showTitle',
    template: `
        <h2 [class]="classNames">
          <div *ngIf="title != undefined" class="landingTitle">
              <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>
          </div>
          <div *ngIf="titleName">
            <span [innerHTML]="titleName"></span>
          </div>
          <div *ngIf="!titleName && !title">
            <span>[no title available]</span>
          </div>
        </h2>
    `

    })

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

  sub: any;

  constructor (private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.queryParams.subscribe(
      params => {
      }
    );
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}