import {
  AfterViewInit,
  ChangeDetectorRef,
  Component,
  ElementRef,
  HostListener,
  Input,
  QueryList,
  ViewChildren
} from '@angular/core';
import {EnvProperties} from "../../utils/properties/env-properties";
import {properties} from "../../../../environments/environment";

@Component({
  selector: 'showIdentifiers',
  template: `
    <!-- <div class="uk-text-muted">Persistent Identifiers</div> -->
    <div class="uk-height-max-medium uk-overflow-auto uk-text-small">
      <ng-container *ngFor="let key of keys let i=index">
        <!-- <div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1"> -->
				<div *ngIf="!showAll" class="uk-flex-inline uk-flex-wrap uk-margin-medium-right">
          <p class="uk-margin-remove">
						<span #content [id]="key">
							<span class="uk-text-meta uk-text-uppercase">{{key}}: </span>
							<ng-container *ngFor="let item of identifiers.get(key) let j=index">
								<!-- TODO: custom external link icons -->
								<a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline">
									{{item}} <span class="custom-external custom-icon"></span>
								</a>
								<a *ngIf="key=='pmc'" [href]="properties.pmcURL + item" target="_blank">
									{{item}} <span class="custom-external custom-icon"></span>
								</a>
								<a *ngIf="key=='pmid'" [href]="properties.pmidURL + item" target="_blank">
									{{item}} <span class="custom-external custom-icon"></span>
								</a>
								<a *ngIf="key=='handle'" [href]="properties.handleURL + item" target="_blank">
									{{item}} <span class="custom-external custom-icon"></span>
								</a>
								<ng-container *ngIf="(j !== (identifiers.get(key).length - 1))">, </ng-container>
							</ng-container>
						</span>
          </p>
        </div>
      </ng-container>
    </div>
    <div *ngIf="isLarge && showViewAll" class="uk-text-right uk-margin-small-top">
      <a (click)="showAll = !showAll">View {{showAll?'less':'all'}}</a>
    </div>
  `
})
export class ShowIdentifiersComponent implements AfterViewInit {
  @Input() identifiers: Map<string, string[]>;
  @Input() showViewAll: boolean = false;
  large: Map<string, boolean> = new Map<string, boolean>();
  showAll: boolean = false;
  properties: EnvProperties = properties;
  @ViewChildren("content", { read: ElementRef }) types: QueryList<ElementRef>;
  
  constructor(private cdr: ChangeDetectorRef) {
  }
  
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.checkLarge();
  }
  
  ngAfterViewInit() {
    this.checkLarge();
  }
  
  checkLarge() {
    let overflow = (this.keys.length === 1?42:21);
    if(typeof document !== "undefined") {
      this.keys.forEach(key => {
        let type = this.types.find(type => type.nativeElement.id === key);
        this.large.set(key, type && type.nativeElement.offsetHeight > overflow);
      });
      this.cdr.detectChanges();
    }
  }
  
  get isLarge() {
    for(let key of this.keys) {
      if (this.large.get(key)) {
        return true;
      }
    }
    return false;
  }
  
  public get keys(): string[] {
    return Array.from(this.identifiers.keys()).sort((a: string, b: string) => {
      if (a === 'doi') {
        return -1;
      } else if (b === 'doi') {
        return 1;
      } else {
        return 0;
      }
    });
  }
}