import {Component, Input, Output, EventEmitter} from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import {ClaimResult} from '../claim-utils/claimEntities.class';

declare var UIkit:any;

@Component({
    selector: 'claim-results',
    template:`

    <ul *ngIf="results.length > 0 "  class="uk-list uk-list-divider">
       <li *ngFor=" let result of results " [class]="(isSelected(result.id))?'uk-block-muted':''">
        <div >
         <a *ngIf="result.url" target="_blank" [href]="result.url" >{{result.title?result.title:'[No title available]'}}</a>
         <span *ngIf="!result.url" >{{result.title?result.title:'[No title available]'}}</span>
         <a class="uk-button-default uk-align-right" *ngIf="!isSelected(result.id)"
         (click)="add(result)"  class="uk-icon-button icon-button-small">
          <span class="uk-icon">
            <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="0.8"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg>
          </span>

           </a>
           <span *ngIf="isSelected(result.id)" class="uk-label uk-label-success">Added</span>
       </div>
        <span  *ngIf="result.publisher!=null" class="uk-article-meta">Publisher: {{result.publisher}}</span>
        <span  *ngIf="result.journal!=null" class="uk-article-meta">Journal: {{result.journal}}</span><span *ngIf="(result.date)" class="uk-article-meta"> ({{result.date}})</span>
        <div *ngIf="result.authors && result.authors.length >0 " class="uk-article-meta">Authors: <span *ngFor="let author of result.authors.slice(0,10) let i = index">{{author}}{{(i < (result.authors.slice(0,10).length-1))?"; ":""}}{{(i == result.authors.slice(0,10).length-1 && result.authors.length > 10)?"...":""}}</span></div>
        <div *ngIf="result.editors && result.editors.length > 0" class="uk-article-meta">Editors: <span *ngFor="let author of result.editors.slice(0,10)  let i = index">{{author}}{{(i < (result.authors.slice(0,10).length-1))?"; ":""}}{{(i == result.authors.slice(0,10).length-1 && result.authors.length > 10)?"...":""}}</span></div>
      </li>
      </ul>`,

})
export class ClaimResultsComponent {
   @Input() results;
   @Input() selectedResults;
   @Input()  localStoragePrefix:string = "";
   private   isSelected(id:string){

       var found:boolean = false;
       for (var _i = 0; _i < this.selectedResults.length; _i++) {
           let item = this.selectedResults[_i];
           if(item.id == id){
                 found=true;
           }
        }
        return found;


     }
     add(item){
       if(this.selectedResults.length > 150){
         UIkit.notification({
             message : 'Your basket exceeds the number of allowed results (150)',
             status  : 'warning',
             timeout : 1500,
             pos     : 'top-center'
         });
         return;
       }
        var found:boolean = this.isSelected( item.id);
         if (!found) {
          this.selectedResults.push(item);

                 UIkit.notification({
                    message : 'A new research result added in your basket.',
                    status  : 'primary',
                    timeout : 1500,
                    pos     : 'top-center'
                });
                if(this.results != null){
                  localStorage.setItem(this.localStoragePrefix + "results", JSON.stringify(this.selectedResults));
                }
        }else{
          UIkit.notification({
              message : 'The  research result is already in your basket.',
              status  : 'warning',
              timeout : 1500,
              pos     : 'top-center'
          });
        }

      }
}