import {Component, Input} from '@angular/core';
import {ClaimEntity} from './claimHelper.class';

declare var UIkit: any;

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

    <div *ngIf="results.length > 0 "   class="uk-padding">
      <div *ngFor=" let entity of results " [class]="(isSelected(entity))?'uk-block-muted':''" class=" uk-card uk-card-default uk-padding-small uk-margin-bottom">
        <div>
          <div class="uk-text-small">
            {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
          </div>
          <div class="uk-grid">
            <div class="uk-width-expand">
              <claim-title [entity]="entity"></claim-title>
              <claim-result-metadata [entity]="entity"></claim-result-metadata>
              <claim-project-metadata [entity]="entity"></claim-project-metadata>
            </div>
            <div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left  uk-margin-small-right" [title]="(this.selectedResults.length>=basketLimit)?'Basket reached the size limit':''">
              <a [class]="(this.selectedResults.length>=basketLimit)?'uk-icon-button uk-disabled':'uk-icon-button '" *ngIf="!isSelected(entity)" 
                 (click)="add(entity)">
                        <span class="uk-icon">
                        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus"
                             ratio="1"><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(entity)" class="uk-icon-button uk-button-primary ">
                     <span class="uk-icon" >
                      <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="check" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline></svg>
                     </span>
                </span>
            </div>
          </div>

        </div>
      </div>
    </div>`,

})
export class ClaimResultsComponent {
  @Input() results: ClaimEntity[];
  @Input() selectedResults: ClaimEntity[];
  @Input() localStoragePrefix: string = "";
  @Input() basketLimit;
  private isSelected(result: ClaimEntity) {

    let found: boolean = false;
    const id = result.id;
    for (let _i = 0; _i < this.selectedResults.length; _i++) {
      let item = this.selectedResults[_i];
      if (item.id && item.id == id) {
        found = true;
        break;
      }
    }
    return found;
    // indexOf doesn't work when results came from
    // return this.selectedResults.indexOf(entity)!=-1;
  }

  add(item: ClaimEntity) {
    // if (this.selectedResults.length > this.basketLimit) {
    //   UIkit.notification({
    //     message: 'Your basket exceeds the number of allowed results (150)',
    //     status: 'warning',
    //     timeout: 1500,
    //     pos: 'top-center'
    //   });
    //   return;
    // }
    let found: boolean = this.isSelected(item);
    if (!found) {
      this.selectedResults.push(item);
      if (this.selectedResults != null) {
        localStorage.setItem(this.localStoragePrefix, JSON.stringify(this.selectedResults));
      }
    }
  }
}