import {Component, Input} from '@angular/core';
import {HelperFunctions} from "../../utils/HelperFunctions.class";

@Component({
  selector: 'relatedTo',
  template: `
    <dl relatedTo [class]="'uk-description-list-line' + ((contexts && contexts.length > threshold) ? ' uk-margin-remove-bottom' : '')">
      <dt class="sideInfoTitle">Related to</dt>
      <dd class="line" *ngFor="let item of contexts.slice(0, showNum) let i=index">
                          <span *ngIf="!item['inline']">
                            <span>{{item['labelContext']}}</span>
                            <span *ngIf="item['labelCategory']"><span uk-icon="icon: arrow-right"></span>{{item['labelCategory']}}</span>
                            <span *ngIf="item['labelConcept']">: {{item['labelConcept']}}</span>
                          </span>
        <mark *ngIf="item['inline']">
          <span>{{item['labelContext']}}</span>
          <span *ngIf="item['labelCategory']"><span uk-icon="icon: arrow-right"></span>{{item['labelCategory']}}</span>
          <span *ngIf="item['labelConcept']">: {{item['labelConcept']}}</span>
        </mark>
      </dd>
    </dl>
    <div *ngIf="showNum > threshold" class="uk-text-right uk-margin-bottom">
      <a (click)="showNum = threshold; scroll()">
        View less
      </a>
    </div>
    <div *ngIf="showNum == threshold && contexts && contexts.length > threshold" class="uk-text-right uk-margin-bottom">
      <a (click)="showNum = contexts.length;">
        View more
      </a>
    </div>
  `
})

export class RelatedToComponent {
  @Input() contexts: { "labelContext": string, "labelCategory": string, "labelConcept": string, "inline": boolean}[];

  public threshold: number = 5;
  public showNum: number = 5;

  constructor () {}

  ngOnInit() {}

  public scroll() {
    HelperFunctions.scroll();
  }
}