import {Component, ViewChild}         from '@angular/core';
import {ElementRef, Input}            from '@angular/core';
import {ActivatedRoute, Router}       from '@angular/router';

import {Observable}                   from 'rxjs';

import {EnvProperties}                from '../../../utils/properties/env-properties';
import {DeletedByInferenceResult}     from '../../../utils/entities/deletedByInferenceResult';
import {RouterHelper}                 from '../../../utils/routerHelper.class';
import {ErrorCodes}                   from '../../../utils/properties/errorCodes';

import {DeletedByInferenceService}    from './deletedByInference.service';

import {zip} from 'rxjs';


@Component({
    selector: 'deletedByInference',
    template: `
    <errorMessages [status]="[status]" [type]="type" tab_error_class=true></errorMessages>

    <div>
      <div *ngIf="results.length > pageSize" class="uk-margin-bottom">
        <span class="uk-h6">{{results.length | number}} {{type}}, page {{page | number}} of {{totalPages(results.length) | number}}</span>
        <paging-no-load class="uk-float-right" [currentPage]="page" [totalResults]="results.length" [size]="pageSize" (pageChange)="updatePage($event)"></paging-no-load>
      </div>

      <ul class="uk-list uk-list-divider  uk-margin">
        <li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
          <h5 *ngIf="result.title" class="uk-margin-remove-bottom">
            <span [innerHTML]="result.title"></span>
          </h5>
          <h5 *ngIf="!result.title">
            <span>[no title available]</span>
          </h5>

          <span *ngIf="result.types && result.types.length > 0"class="uk-label custom-label label-blue label-publication" title="Type">{{result.types.join(", ")}}</span>{{" "}}
          <span *ngIf="result.languages && result.languages.length > 0" class="uk-label custom-label  label-language " title="Language">{{result.languages.join(", ")}}</span>{{" "}}
          <span *ngIf="result.countries && result.countries.length > 0" class="uk-label custom-label  label-country " title="Country">{{result.countries.join(", ")}}</span>{{" "}}
          <span *ngIf="result.accessMode" [class]="'uk-label custom-label  label-'+ result.accessMode " title="Access Mode">{{result.accessMode}}</span>{{" "}}

          <div>
              <showAuthors [authors]="result.authors"></showAuthors>
              <span *ngIf="result.date != ''">({{result.date}})</span>
          </div>

          <div *ngIf="result.identifiers && result.identifiers.size > 0">
            <showIdentifiers [identifiers]="result.identifiers"></showIdentifiers>
          </div>

          <div *ngIf="result['fundedByProjects'] != undefined">
              <span class="uk-text-bold"> Project: </span>
              <span *ngFor="let project of result['fundedByProjects'].slice(0,15) let i=index">
                  {{project['funderShortname']?project['funderShortname']:project['funderName']}}
                    | {{ project['acronym']?project['acronym']:(project['title'].length>25?project['title'].substring(0,25)+'...':project['title'])}} ({{project.code}})<span

                  *ngIf="!project.id">{{project['funderShortname']?project['funderShortname']:project['funderName']}}<span
                  *ngIf="project['acronym'] || project['title']"> | {{ project['acronym']?project['acronym']:(project['title'].length>25?project['title'].substring(0,25)+'...':project['title'])}}</span><span
                  *ngIf="project.code">({{project.code}})</span></span><span

              *ngIf="i < result['fundedByProjects'].length-1">,</span>
              </span>
              <span *ngIf="result['fundedByProjects'].length > 15">...</span>
          </div>

          <!--div class="uk-margin-top" *ngIf="result.hostedBy_collectedFrom && result.hostedBy_collectedFrom.length > 0">
              <availableOn [availableOn]="result.hostedBy_collectedFrom"></availableOn>
          </div-->

          <div *ngIf="result.hostedBy_collectedFrom != undefined">
            <span class="uk-text-bold"> Collected From: </span>
            <span *ngFor="let available of result.hostedBy_collectedFrom let i=index">
              <span *ngIf="available.downloadUrl.length > 1"
                    class="custom-external custom-icon">
                    {{available.downloadName}}
                <span *ngFor="let url of available.downloadUrl; let i=index;">
                    <a  href="{{url}}" target="_blank"
                        attr.uk-tooltip="pos:right; delay:10">
                        [{{(i+1) | number}}]
                    </a>
                </span>
              </span><a
              class="custom-external custom-icon"
                  *ngIf="available['downloadUrl'].length == 1"
                  href="{{available['downloadUrl']}}"
                  target="_blank"
                  attr.uk-tooltip="pos:right; delay:10">
                  {{available.downloadName}}</a><span
              *ngIf="i < result['hostedBy_collectedFrom'].length-1">,</span>
            </span>
            <span *ngIf="result['hostedBy_collectedFrom'].length > 15">...</span>
          </div>

          <div *ngIf="result.description" class="uk-margin-bottom uk-text-justify descriptionText">
            {{result.description}}
          </div>



        </li>
      </ul>
    </div>
    `
})

export class DeletedByInferenceComponent {
  public results: DeletedByInferenceResult[] = [];
  @Input() id: string;
  @Input() ids: string[] = [];
  @Input() type: string;

  // Custom tab paging variables
  public page: number = 1;
  public pageSize: number = 10;

  public status: number;
  public routerHelper:RouterHelper = new RouterHelper();
  public errorCodes:ErrorCodes = new ErrorCodes();

  sub: any;
  properties:EnvProperties;

  constructor ( private element: ElementRef,
                private _deletedByInferenceService: DeletedByInferenceService,
                private route: ActivatedRoute,
                private _router: Router) {
  }

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

      });
       this.sub =  this.route.queryParams.subscribe(data => {
         this.errorCodes = new ErrorCodes();
         this.status = this.errorCodes.LOADING;

         this.getDeletedByInference();
    });
  }

  ngOnDestroy() {}

  getDeletedByInference() {
    this.results = [];
    this.status = this.errorCodes.LOADING;

    if(this.ids) {
      var allRequests = [];
      for(let id of this.ids) {
        allRequests.push(this._deletedByInferenceService.getDeletedByInferencePublications(id, this.properties));
      }

      zip.apply(null, allRequests).subscribe(
     //   this._deletedByInferenceService.getDeletedByInferencePublications(id, this.properties).subscribe(
         data => {
           this.results = data;
           this.status = this.errorCodes.DONE;
         },
         error => {
           if(error.status == '404') {
             this.status = this.errorCodes.NOT_FOUND;
           } else if(error.status == '500') {
             this.status = this.errorCodes.ERROR;
           } else {
             this.status = this.errorCodes.NOT_AVAILABLE;
           }
         }
       );
     }
  }

  public totalPages(totalResults: number): number {
    let totalPages:any = totalResults/this.pageSize;
    if(!(Number.isInteger(totalPages))) {
        totalPages = (parseInt(totalPages, this.pageSize) + 1);
    }
    return totalPages;
  }

  public updatePage($event) {
    this.page = $event.value;
  }
}