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

@Component({
    selector: 'availableOn',
    template: `
    <dl class="uk-description-list-line">
        <dt class="title">Available On</dt>
        <dd class="line" *ngFor="let available of availableOn.slice(0, showNum) let i=index" >
            <div>
              <div class="{{available['bestAccessMode']}}">
                <span *ngIf="available.downloadUrl.length > 1"
                      class="custom-external custom-icon">
                      {{available.downloadName}}
                  <span *ngFor="let url of available.downloadUrl; let i=index;">
                      <a  href="{{url}}" target="_blank"
                          [attr.uk-tooltip]="available.accessMode[i] ? 'pos:right; delay:10' : 'cls: uk-invisible'"
                          [title]="available.accessMode[i]">
                          [{{(i+1) | number}}]
                      </a>
                  </span>
                </span>
                <a  class="custom-external custom-icon"
                    *ngIf="available['downloadUrl'].length == 1"
                    href="{{available['downloadUrl']}}"
                    target="_blank"
                    [attr.uk-tooltip]="available['bestAccessMode'] ? 'pos:right; delay:10' : 'cls: uk-invisible'"
                    [title]="available['bestAccessMode']">
                    {{available.downloadName}}
                </a>
                <span *ngIf="available.collectedName" class="uk-text-bold">via</span>
                <a *ngIf="available.collectedName"
                    [queryParams]="{datasourceId: available.collectedId}" routerLinkActive="router-link-active" routerLink="/search/dataprovider">
                  {{available.collectedName}}
                </a>
                <span *ngIf="available.type || available.year">(<span *ngIf="available.type">{{available.type}}<span *ngIf="available.year">, </span></span><span *ngIf="available.year">{{available.year}}</span>)</span>
              </div>
            </div>
        </dd>
    </dl>

    <div *ngIf="showNum > threshold" class="uk-text-right">
      <a (click)="showNum = threshold; scroll()">
        View less
      </a>
    </div>
    <div *ngIf="showNum == threshold && availableOn && availableOn.length > 5">...</div>
    <div *ngIf="showNum == threshold && availableOn && availableOn.length > 5" class="uk-text-right">
      <a (click)="showNum = availableOn.length;">
        View more
      </a>
    </div>
    `
    })

export class AvailableOnComponent {
    @Input() availableOn: { "downloadName": string, "downloadUrl": string[],
                            "collectedName": string, "collectedId": string,
                            "accessMode": string[], "bestAccessMode": string,
                            "type": string, "year":string }[];

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

    constructor (private element: ElementRef) {}

    ngOnInit() {}

    public scroll() {
      console.info("scroll into view");
      if (typeof document !== 'undefined') {
         this.element.nativeElement.scrollIntoView();
      }
    }
}