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

@Component({
    selector: 'showIdentifiers',
    template: `

                <span *ngIf="showAll && countIdentifiers() > pageSize">
                    <a (click)="showAll = !showAll;">View less identifiers</a>
                </span>

                <ng-container *ngFor="let key of getKeys(identifiers) let i=index">
                  <ng-container *ngIf="countSizeOfPreviousIdentifiers(i) < pageSize">
                    <ng-container *ngFor="let item of identifiers.get(key) let j=index">
                      <span *ngIf="(sizeOfPreviousIdentifiers + j) < pageSize || showAll" class="custom-external custom-icon">
                        <a *ngIf="key=='doi'" href="{{doiURL}}{{item}}" target="_blank">{{key}}: {{item}}</a><a
                        *ngIf="key=='pmc'" href="{{pmcURL}}{{item}}" target="_blank">{{key}}: {{item}}</a><a
                        *ngIf="key=='handle'" href="{{handleURL}}{{item}}" target="_blank">{{key}}: {{item}}</a></span><span

                        *ngIf="((sizeOfPreviousIdentifiers + j) < pageSize || showAll) && ((sizeOfPreviousIdentifiers + j) < countIdentifiers()-1)">{{", "}}</span>
                      <span *ngIf="!showAll && (sizeOfPreviousIdentifiers + j)==pageSize"> ... </span>
                    </ng-container>
                  </ng-container>
                </ng-container>

                <span *ngIf="!showAll && countIdentifiers() > pageSize">
                    <a (click)="showAll = !showAll;">
                        view all {{countIdentifiers() | number}} identifiers
                    </a>
                </span>
                <span *ngIf="showAll && countIdentifiers() > pageSize">
                    <a (click)="showAll = !showAll; scroll()">View less identifiers</a>
                </span>


    `
    })

export class ShowIdentifiersComponent {
    @Input() identifiers: Map<string, string[]>;
    public doiURL: string;
    public pmcURL: string;
    public handleURL: string;
    public showAll: boolean = false;
    public sizeOfIdentifiers: number = -1;
    public sizeOfPreviousIdentifiers: number = -1;
    public pageSize: number = 10;

    constructor (private element: ElementRef) {
        this.doiURL = "https://dx.doi.org/";
        this.pmcURL = "http://europepmc.org/articles/";
        this.handleURL = "http://hdl.handle.net/";
    }

    ngOnInit() {}

    public countIdentifiers(): number {
      if(this.sizeOfIdentifiers < 0) {
        let num: number = 0;
        if(this.identifiers != undefined) {
            this.identifiers.forEach(function (value, key, map) {
                num += value.length;
            });
        }
        this.sizeOfIdentifiers = num;
      }
      return this.sizeOfIdentifiers;
    }

    public countSizeOfPreviousIdentifiers(index: number): number {
      let num: number = 0;
      let i: number = 0;
      if(this.identifiers != undefined) {
        this.identifiers.forEach(function (value, key, map) {
          if(i < index) {
            num += value.length;
          }
          i++;
        });
      }
      this.sizeOfPreviousIdentifiers= num;
      return num;
    }

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