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

@Component({
  selector: 'showAuthors',
  template: `
      <span *ngIf="authors != undefined">
        <div *ngIf="showAll && numberOfAuthors > authorsLimit">
          <a (click)="numberOfAuthors = authorsLimit;">View less authors</a>
        </div>
        
        <span *ngFor="let author of authors.slice(0,numberOfAuthors) let i=index">
          <i *ngIf="!author.orcid || (properties.environment != 'beta' && properties.environment != 'development')">{{author.fullName}}</i
          ><a *ngIf="author.orcid && (properties.environment == 'beta' || properties.environment == 'development')"><i>{{author.fullName}}</i></a
          ><div *ngIf="author.orcid && (properties.environment == 'beta' || properties.environment == 'development')" class=" default-dropdown uk-margin-remove-top uk-padding-medium" 
               uk-dropdown="pos: bottom-left; mode:hover" style="min-width: 70px !important;">
            <b class="uk-margin-top">{{author.fullName}}</b>
          
            <div>
              <div class="uk-text-muted">ORCID</div>
              <span><code class="uk-padding-small" [id]="'orcid_clipboard_auhtor_'+i">{{author.orcid}}</code></span>
              <span>
                <button [class]="'uk-icon-clipboard uk-button uk-button-primary uk-button-small orcid_clipboard_btn_auhtor_'+i"
                         [attr.data-clipboard-target]="'#orcid_clipboard_auhtor_'+i" title="Copy to clipboard">
                  Copy
                </button>
                <a class="uk-button uk-button-primary uk-button-small" title="Visit author in Orcid"
                        [href]="properties.orcidURL+author.orcid" target="_blank">
                  Visit
                </a>
              </span>
            </div>
            
            <hr>
            <div class="uk-margin-top">
              Search <b>{{author.fullName}}</b> by <b>ORCID</b> in OpenAIRE's
            </div>
            <div class="uk-text-center uk-margin-small uk-margin-large-left uk-margin-large-right">
              <a class="uk-button uk-button-small portal-button uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1"
                  [queryParams]="routerHelper.createQueryParams(['orcid','oc'],[quote(author['orcid']),'and'])" routerLinkActive="router-link-active" routerLink="/search/advanced/publications">
                  Publications
              </a>
            </div>
            <div class="uk-text-center uk-margin-small uk-margin-large-left uk-margin-large-right">
              <a class="uk-button uk-button-small portal-button uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1"
                  [queryParams]="routerHelper.createQueryParams(['orcid','oc'],[quote(author['orcid']),'and'])" routerLinkActive="router-link-active" routerLink="/search/advanced/datasets">
                  Research Data
              </a>
            </div>
            <div class="uk-text-center uk-margin-small uk-margin-large-left uk-margin-large-right">
              <a class="uk-button uk-button-small portal-button uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1"
                  [queryParams]="routerHelper.createQueryParams(['orcid','oc'],[quote(author['orcid']),'and'])" routerLinkActive="router-link-active" routerLink="/search/advanced/software">
                  Software
              </a>
            </div>
            <div class="uk-text-center uk-margin-small uk-margin-large-left uk-margin-large-right">
              <a class="uk-button uk-button-small portal-button uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1"
                  [queryParams]="routerHelper.createQueryParams(['orcid','oc'],[quote(author['orcid']),'and'])" routerLinkActive="router-link-active" routerLink="/search/advanced/other">
                  Other Research Products
              </a>
            </div>
          </div
          ><span>;{{" "}}</span>
        </span>
        <span *ngIf="numberOfAuthors == authorsLimit && authors.length > authorsLimit">	... </span>
        <span *ngIf="showAll && numberOfAuthors == authorsLimit && authors.length > authorsLimit">
          <a (click)="numberOfAuthors = authors.length;">
            view all {{authors.length | number}} authors
          </a>
        </span>
        <span *ngIf="showAll && numberOfAuthors > authorsLimit">
          <a (click)="numberOfAuthors = authorsLimit; scroll()">View less authors</a>
        </span>
      </span>
    `

})

export class ShowAuthorsComponent {
  @Input() authors: {"fullName": string, "orcid": string}[];
  @Input() authorsLimit: number = 30;
  @Input() showAll: boolean = true;

  public numberOfAuthors: number;
  public properties:EnvProperties;
  public routerHelper:RouterHelper = new RouterHelper();

  constructor (private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
      this.properties = data.envSpecific;
    });
    this.numberOfAuthors = this.authorsLimit;

    if(typeof window !== 'undefined') {
      let orcid_clipboard;
      let Clipboard;
      Clipboard = require('clipboard');
      if(this.authors) {
        this.authors.forEach((author, index) => {
          if (author && author.orcid) {
            orcid_clipboard = new Clipboard('.orcid_clipboard_btn_auhtor_' + index);
          }
        });
      }
    }
  }

  public  quote(params: string):string {
    return '"'+params+'"';
  }

  public scroll() {
    HelperFunctions.scroll();
  }
}