import {Component, EventEmitter, Input, Output} from '@angular/core';
import {HostedByCollectedFrom} from "../../utils/result-preview/result-preview";
import {properties} from "../../../../environments/environment";

@Component({
  selector: 'availableOn',
  template: `
    <div class="uk-margin-small-bottom uk-flex uk-flex-between">
      <span *ngIf="viewAll && !lessBtn" class="clickable uk-h6 uk-flex uk-flex-middle" (click)="viewLessClick()">
        <icon class="uk-margin-small-right" name="arrow_back" flex="true" ratio="1.2"></icon>
        {{title}}
      </span>
      <span *ngIf="!viewAll || lessBtn" class="uk-margin-small-bottom uk-flex uk-flex-middle">
        <span class="uk-text-light-grey uk-margin-small-right">Download from</span>
      </span>
      <a *ngIf="viewAll && lessBtn" (click)="viewAll = !viewAll; lessBtn=false;">View less</a>
      <a *ngIf="availableOn && availableOn.length > threshold && !viewAll"
         (click)="viewAllClick();">View all {{availableOn.length}} sources</a>
    </div>
    
    <div *ngIf="availableOn" class="download-from uk-margin-small-bottom">
      <div *ngFor="let instance of availableOn.slice(0, viewAll?availableOn.length:threshold) let i=index"
           class="uk-flex uk-flex-top uk-padding-small uk-margin-small-bottom"
           [title]="instance.accessRight ? instance.accessRight : 'Not available'">
        <span [class]="'uk-margin-small-right ' + (instance.accessRightIcon == 'lock_open' ? 'uk-text-success' : 'uk-text-meta')">
          <icon [name]="instance.accessRightIcon" flex="true" type="outlined"></icon>
        </span>
        <div class="uk-width-expand uk-padding-small uk-padding-remove-left uk-padding-remove-vertical">
          <span class="uk-text-emphasis">
            <a *ngIf="instance.downloadUrl" [href]="instance.downloadUrl" target="_blank"
               class="title uk-link-text uk-text-bold custom-external uk-display-inline-block">
              {{instance.downloadNames.join("; ")}}
            </a>
          </span>
          <div *ngIf="instance.types?.length > 0 || instance.years?.length > 0" class="uk-text-meta">
            <span *ngIf="instance.types?.length > 0" class="uk-text-capitalize">{{instance.types.join(" . ")}}</span>
            <span *ngIf="instance.types?.length > 0 && instance.years?.length > 0"> . </span>
            <span *ngIf="instance.years?.length > 0">{{instance.years.join(" . ")}}</span>
          </div>
          <div *ngIf="instance.collectedNamesAndIds?.size > 0" class="uk-text-meta">
            <span>Providers: </span>
            <a *ngFor="let collectedName of getKeys(instance.collectedNamesAndIds); let i=index" [routerLink]="dataProviderUrl"
               [queryParams]="{datasourceId: instance.collectedNamesAndIds.get(collectedName)}">
              {{collectedName}}<ng-container *ngIf="(i !== (instance.collectedNamesAndIds.size - 1))">; </ng-container>
            </a>
          </div>
        </div>
      </div>
    </div>
<!--    <div *ngIf="showNum > threshold" class="uk-margin-bottom">-->
<!--      <a (click)="showNum = threshold;" class="uk-flex uk-flex-middle uk-flex-center">-->
<!--        <span>View less</span>-->
<!--        <span class="space uk-icon">-->
<!--          <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="chevron-up">-->
<!--            <polyline fill="none" stroke="#000" stroke-width="1.03" points="4 13 10 7 16 13"></polyline>-->
<!--          </svg>-->
<!--        </span>-->
<!--      </a>-->
<!--    </div>-->
<!--    <div *ngIf="showNum == threshold && availableOn && availableOn.length > 5" class="uk-margin-bottom">-->
<!--      <a (click)="showNum = availableOn.length;" class="uk-flex uk-flex-middle uk-flex-center">-->
<!--        <span>View more</span>-->
<!--        <span class="space uk-icon">-->
<!--          <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="chevron-down">-->
<!--            <polyline fill="none" stroke="#000" stroke-width="1.03" points="16 7 10 13 4 7"></polyline>-->
<!--          </svg>-->
<!--        </span>-->
<!--      </a>-->
<!--    </div>-->
  `
})

export class AvailableOnComponent {
  @Input() availableOn: HostedByCollectedFrom[];
  @Input() viewAll: boolean = false;
  @Output() viewAllClicked  = new EventEmitter();
  public lessBtn: boolean = false;
  public threshold: number = 1;
  public dataProviderUrl = properties.searchLinkToDataProvider.split('?')[0];
  public title: string = "Download from";
  
  constructor() {
  }
  
  ngOnInit() {}
  
  public removeUnknown(value: string): string {
    if (value.toLowerCase() === 'unknown') {
      return null;
    }
    return value;
  }

  public getKeys( map) {
    return Array.from(map.keys());
  }

  public viewAllClick() {
    if(this.availableOn.length <= this.threshold*2) {
      this.viewAll = true;
      this.lessBtn = true;
    } else {
      this.viewAll = true;
      this.viewAllClicked.emit('availableOn');
    }
  }

  public viewLessClick() {
    this.viewAll = false;
    this.viewAllClicked.emit("");
  }
}