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

@Component({
  selector: 'relatedTo',
  template: `
    <div class="uk-text-muted">Communities</div>
    <div class="uk-margin-small-left" *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>
    </div>
    <div *ngIf="showNum > threshold" class="uk-text-right">
      <a (click)="showNum = threshold; scroll()">
        View less
      </a>
    </div>
    <div *ngIf="showNum == threshold && contexts && contexts.length > threshold" class="uk-text-right">
      <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();
  }
}