import {Component, EventEmitter, Inject, Input, Output, PLATFORM_ID, ViewChild} from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {HelperFunctions} from '../HelperFunctions.class';
import {RouterHelper} from "../routerHelper.class";
import {EnvProperties} from '../properties/env-properties';
import {isPlatformBrowser} from "@angular/common";
import {Author} from "../result-preview/result-preview";
import {AlertModal} from "../modal/alert";
import {properties} from "../../../../environments/environment";

@Component({
  selector: 'showAuthors',
  template: `
    <ng-template #author_template let-author="author" let-i="i">
      <span *ngIf="(!author.orcid && !author.orcid_pending) || !testBrowser">
        {{author.fullName + ";"}}&#160;
      </span>
      <a *ngIf="(author.orcid || author.orcid_pending) && testBrowser" class="uk-display-inline-block space uk-link-text">
          <span>
            <img *ngIf="author.orcid" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid" loading="lazy" style="width:16px; height:16px">
            <img *ngIf="!author.orcid && author.orcid_pending" src="assets/common-assets/common/ORCIDiD_iconbw16x16.png" alt="orcid bw" loading="lazy">&#160;
            <span>
              {{author.fullName + ";"}}&#160;
            </span>
          </span>
      </a>
      <div *ngIf="(author.orcid || author.orcid_pending) && testBrowser"
           class="default-dropdown uk-margin-remove-top uk-dropdown"
           uk-dropdown="mode:click; offset: 4" style="min-width: 465px !important;">
        <div class="uk-padding-small">
          <h6 class="uk-margin-remove">{{author.fullName}}</h6>
          <div>
            <div class="uk-text-meta uk-margin-bottom">ORCID</div>

            <div class="uk-text-meta uk-text-xsmall uk-margin-small-top uk-margin-small-bottom">
              <img *ngIf="author.orcid" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}}
              <img *ngIf="!author.orcid && author.orcid_pending" src="assets/common-assets/common/ORCIDiD_iconbw16x16.png" alt="" loading="lazy">{{" "}}

              <i *ngIf="author.orcid">Harvested from ORCID Public Data File</i>
              <i *ngIf="!author.orcid && author.orcid_pending">Derived by OpenAIRE algorithms or harvested from 3d party repositories</i>
            </div>
            <div>
              <div class="clipboard-wrapper uk-width-1-1 uk-flex uk-flex-middle uk-flex-center" 
                   style="min-height: 43px; min-width: 280px;">
                <span id="element" class="uk-padding-small uk-text-emphasis">
                  {{properties.orcidURL+(author.orcid ? author.orcid : author.orcid_pending)}}
                </span>
                <a [class]="'uk-link copy orcid_clipboard_btn orcid_clipboard_btn_auhtor_'+i"
                   data-clipboard-target="#element" title="Copy to clipboard">
                  COPY
                </a>
              </div>
              <div class="uk-text-center uk-margin-small-top">
                <a class="uk-button uk-button-text custom-external"
                   title="Visit author in ORCID" [href]="properties.orcidURL+(author.orcid ? author.orcid : author.orcid_pending)" target="_blank">
                  VISIT AUTHOR IN ORCID
                </a>
              </div>
            </div>
          </div>

          <hr>
          <div class="uk-margin-top uk-text-bold uk-text-emphasis uk-text-center">
            {{author.fullName}} in OpenAIRE
          </div>
          <div class="uk-text-center uk-margin-top uk-margin-large-left uk-margin-large-right">
            <a class="uk-button uk-button-primary uk-text-bold uk-padding-remove-top uk-padding-remove-bottom"
               (click)="onClick()"
               [queryParams]="routerHelper.createQueryParams(['orcid','oc'],[(author['orcid'] ? author['orcid'] : author['orcid_pending']),'and'])"
               routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults">
              <span class="space">Search</span>
            </a>
          </div>
        </div>
      </div>
    </ng-template>
    
    <div *ngIf="authors" class="uk-height-max-medium uk-overflow-auto uk-text-small uk-text-emphasis">
      <span *ngFor="let author of authors.slice(0, viewAll?authors.length:authorsLimit) let i=index">
        <ng-container *ngTemplateOutlet="author_template; context: { author: author, i:i}"></ng-container>
      </span>
      <span *ngIf="showAll && authors && authors.length > authorsLimit && !viewAll">
        <a (click)="viewAllClick();">
          +{{authors.length-authorsLimit | number}} Authors
        </a>
      </span>
    </div>
    <div *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;" class="uk-width-1-1 uk-text-right uk-text-small">
      <a>View less authors</a>
    </div>

    <modal-alert #authorsModal [classTitle]="'landing-modal-header'"
                 [classBody]="'landing-modal uk-padding-remove'">
      <div class="uk-padding uk-padding-remove-top uk-overflow-auto">
        <span *ngFor="let author of authors; let i=index" 
              class=" uk-text-small uk-text-emphasis">
          <ng-container *ngTemplateOutlet="author_template; context: { author: author, i:i}"></ng-container>
        </span>
      </div>
    </modal-alert>
  `
  
})

export class ShowAuthorsComponent {
  @Input() authors: Author[];
  @Input() authorsLimit: number = 7;
  @Input() showAll: boolean = true;
  @Input() modal: AlertModal;
  @Input() viewAll: boolean = false;
  public lessBtn: boolean = false;
  @ViewChild('authorsModal') authorsModal;

  public properties: EnvProperties = properties;
  public routerHelper: RouterHelper = new RouterHelper();
  
  testBrowser: boolean;
  public clipboard;

  constructor(private route: ActivatedRoute, @Inject(PLATFORM_ID) private platformId: string) {
    this.testBrowser = isPlatformBrowser(platformId);
  }
  
  ngOnInit() {
    this.createClipboard();
  }
  
  public onClick() {
    if (this.modal) {
      this.modal.cancel();
    }
  }

  public viewAllClick() {
    if(this.authors.length <= this.authorsLimit*2) {
      this.viewAll = true;
      this.lessBtn = true;
    } else {
      this.openAuthorsModal();
    }
  }

  public openAuthorsModal() {
    this.authorsModal.cancelButton = false;
    this.authorsModal.okButton = false;
    this.authorsModal.alertTitle = "Authors";
    this.authorsModal.open();
  }

  private createClipboard() {
    if (typeof window !== 'undefined') {
      delete this.clipboard;
      let Clipboard;
      Clipboard = require('clipboard');
      this.clipboard = new Clipboard('.orcid_clipboard_btn');
    }
  }
}