import {Component, Input, ElementRef} from '@angular/core';
import {RouterHelper} from '../../utils/routerHelper.class';

@Component({
    selector: 'showAuthors',
    template: `
        <span *ngIf="authors != undefined">
            <div *ngIf="showAll">
                <a (click)="showAll = !showAll;">View less authors</a>
            </div>
            <span *ngFor="let author of authors.slice(0,30) let i=index" style="font-style: italic;">
                  <!--a [queryParams]="routerHelper.createQueryParams(['author','at'],[quote(author['name']),'and'])" routerLinkActive="router-link-active" [routerLink]="'/search/advanced/'+searchPage">
                      {{author['name']}}
                  </a-->
                  {{author}}
               <span *ngIf=" i<29 && i<(authors.length-1)">;</span>
            </span>
            <span *ngIf="!showAll && authors.length > 30">	... </span>
            <span *ngIf="showAll" style="font-style: italic;">
                <span *ngFor="let author of authors.slice(30) let i=index">
                    <!--a [queryParams]="routerHelper.createQueryParams(['author','at'],[quote(author['name']),'and'])" routerLinkActive="router-link-active" [routerLink]="'/search/advanced/'+searchPage">
                        {{author['name']}}
                    </a-->
                    {{author}}
                    <span *ngIf="  i<(authors.length-1)">;</span>
                </span>
            </span>
            <span *ngIf="!showAll && authors.length > 30">
                <a (click)="showAll = !showAll;">
                    view all {{authors.length | number}} authors
                </a>
            </span>
            <span *ngIf="showAll">
                <a (click)="showAll = !showAll; scroll()">View less authors</a>
            </span>
        </span>

    `

    })

export class ShowAuthorsComponent {
    @Input() authors: { [key: string]: string }[];
    @Input() searchPage:string ="publications"

    public showAll: boolean = false;
    public routerHelper:RouterHelper = new RouterHelper();

    constructor (private element: ElementRef) {
    }

    ngOnInit() {
    }

    public  quote(params: string):string {
        return '"'+params+'"';
    }

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