import {Component, Inject, Input, PLATFORM_ID} 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: `
    <div *ngIf="authors" class="uk-height-max-medium uk-overflow-auto">
      <span *ngFor="let author of authors.slice(0,numberOfAuthors) let i=index">
          <span *ngIf="(!author.orcid && !author.orcid_pending) || !testBrowser"
                [class.uk-text-small]="small">
            {{author.fullName + "; "}}
          </span>
          <a *ngIf="(author.orcid || author.orcid_pending) && testBrowser" class="uk-display-inline-block space">
            <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">{{" "}}
              <span [class.uk-text-small]="small">
                {{author.fullName + "; "}}
              </span>
            </span>
          </a>
        <div *ngIf="(author.orcid || author.orcid_pending) && testBrowser"
             class="default-dropdown uk-margin-remove-top uk-padding-medium uk-dropdown"
             uk-dropdown="pos: bottom-left; mode:click" style="min-width: 465px !important;">
            <b class="uk-margin-top">{{author.fullName}}</b>
            <div>
              <div class="uk-text-muted uk-margin-small-bottom uk-margin-small-top">ORCID</div>
              
              <div class="uk-text-muted uk-text-small 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="orcid uk-display-inline-block">
                  <input #element class="uk-padding-small uk-padding-remove-vertical uk-disabled"
                         style="min-height: 38px; min-width: 280px;" name="code" [value]="properties.orcidURL+(author.orcid ? author.orcid : author.orcid_pending)">
                  <button [class]="'uk-button uk-button-primary uk-button-small uk-icon copy orcid_clipboard_btn_auhtor_'+i" style="min-height: 40px"
                          (click)="copyToClipboard(element)" title="Copy to clipboard">
                   <span class="custom-icon custom-copy-white"></span>
                  </button>
                </div>
                <a class="uk-button uk-button-primary custom-icon-button target uk-button-icon uk-margin-small-left"
                   title="Visit author in ORCID" [href]="properties.orcidURL+(author.orcid ? author.orcid : author.orcid_pending)" target="_blank">
                  <span class="custom-icon custom-external-white"></span>
                </a>
              </div>
            </div>
          
            <hr>
            <div class="uk-margin-top">
              Search <b>{{author.fullName}}</b> in OpenAIRE
            </div>
            <div class="uk-text-center uk-margin-top uk-margin-large-left uk-margin-large-right">
              <a class="uk-button uk-text-bold portal-button uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1"
                 (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>
        </span>
      <span *ngIf="numberOfAuthors == authorsLimit && authors.length > authorsLimit">	... </span>
    </div>
    <div *ngIf="authors && showAll && numberOfAuthors == authorsLimit && authors.length > authorsLimit"
         class="uk-width-1-1 uk-text-right">
      <a (click)="numberOfAuthors = authors.length;">
        View all {{authors.length | number}} authors
      </a>
    </div>
    <div *ngIf="authors && showAll && numberOfAuthors > authorsLimit" class="uk-width-1-1 uk-text-right">
      <a (click)="numberOfAuthors = authorsLimit;">View less authors</a>
    </div>
  `
  
})

export class ShowAuthorsComponent {
  @Input() authors: Author[];
  @Input() authorsLimit: number = 30;
  @Input() showAll: boolean = true;
  @Input() small: boolean = true;
  @Input() modal: AlertModal;
  
  public numberOfAuthors: number;
  public properties: EnvProperties = properties;
  public routerHelper: RouterHelper = new RouterHelper();
  
  testBrowser: boolean;
  
  constructor(private route: ActivatedRoute, @Inject(PLATFORM_ID) private platformId: string) {
    this.testBrowser = isPlatformBrowser(platformId);
  }
  
  ngOnInit() {
    this.numberOfAuthors = this.authorsLimit;
  }
  
  copyToClipboard(element: HTMLInputElement) {
    element.select();
    if (typeof document !== 'undefined') {
      document.execCommand('copy');
    }
  }
  
  public onClick() {
    if (this.modal) {
      this.modal.cancel();
    }
  }
}