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

@Component({
  selector: 'showIdentifiers',
  template: `
      <ng-container *ngFor="let key of getKeys(identifiers) let i=index">
        <li>
          <span *ngIf="countSizeOfPreviousIdentifiers(i) < pageSize || showAll" class="uk-margin-right">
            <span class="uk-text-muted uk-text-uppercase">{{key}}: </span>
            <ng-container *ngFor="let item of identifiers.get(key) let j=index">
              <span *ngIf="(sizeOfPreviousIdentifiers + j) < pageSize || showAll">
                <span class="uk-display-inline-block">
                  <a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank">
                    {{item}} <span class="custom-external custom-icon space"></span>
                  </a>
                  <a *ngIf="key=='pmc'" [href]="properties.pmcURL + item"  target="_blank">
                    {{item}} <span class="custom-external custom-icon space"></span>
                  </a>
                  <a *ngIf="key=='pmid'" [href]="properties.pmidURL + item"  target="_blank">
                    {{item}} <span class="custom-external custom-icon space"></span>
                  </a>
                  <a *ngIf="key=='handle'" [href]="properties.handleURL + item" target="_blank">
                    {{item}} <span class="custom-external custom-icon space"></span>
                  </a>
                </span>
                <span *ngIf="j !== (identifiers.get(key).length - 1)">, </span>
              </span>
            </ng-container>
          </span>
        </li>
      </ng-container>
      <div *ngIf="!showAll && countIdentifiers() > pageSize" class="uk-text-right">
        <a (click)="showAll = !showAll;">
            View all {{countIdentifiers() | number}} identifiers
        </a>
      </div>
      <div *ngIf="showAll && countIdentifiers() > pageSize" class="uk-text-right">
        <a (click)="showAll = !showAll; scroll()">View less identifiers</a>
      </div>
  `
})

export class ShowIdentifiersComponent {
  @Input() identifiers: Map<string, string[]>;
  @Input() properties: EnvProperties;
  public showAll: boolean = false;
  public sizeOfIdentifiers: number = -1;
  public sizeOfPreviousIdentifiers: number = -1;
  public pageSize: number = 3;
  
  constructor() {}
  
  ngOnInit() {}
  
  public countIdentifiers(): number {
    if (this.sizeOfIdentifiers < 0) {
      let num: number = 0;
      if (this.identifiers != undefined) {
        this.identifiers.forEach((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() {
    HelperFunctions.scroll();
  }
  
  public getKeys(map) {
    return Array.from(map.keys()).sort((a: string, b: string) => {
      if(a === 'doi') {
        return -1;
      } else if(b === 'doi') {
        return 1;
      } else {
        return 0;
      }
    });
  }
}