import {Component, Input} from '@angular/core';

import { FetchResearchResults } from '../../utils/fetchEntitiesClasses/fetchResearchResults.class';

import { ErrorCodes} from '../../utils/properties/errorCodes';
import { RouterHelper } from '../../utils/routerHelper.class';
import { EnvProperties } from '../../utils/properties/env-properties';
import {AlertModal} from "../../utils/modal/alert";

@Component({
  selector: 'relatedDatasourcesTab',
  template: `
<!--      <errorMessages  [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status, fetchSoftware.searchUtils.status, fetchOrps.searchUtils.status]"-->
<!--                        [type]="'related content providers'" tab_error_class=true>-->
<!--      </errorMessages>-->

<!--      <div *ngIf="(fetchPublications.searchUtils.status == errorCodes.DONE || fetchDatasets.searchUtils.status == errorCodes.DONE-->
<!--                   || fetchSoftware.searchUtils.status == errorCodes.DONE || fetchOrps.searchUtils.status == errorCodes.DONE)-->
<!--                   && !loading">-->
<!--&lt;!&ndash;            <div *ngIf="results && results.size > pageSize" class="uk-margin">&ndash;&gt;-->
<!--&lt;!&ndash;              <span class="uk-text-bold">{{results.size | number}} related content providers, page {{page | number}} of {{totalPages(results.size) | number}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;              <paging-no-load class="uk-float-right" [currentPage]="page" [totalResults]="results.size" [size]="pageSize" (pageChange)="updatePage($event)"></paging-no-load>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--        <no-load-paging *ngIf="results.size >pageSize"-->
<!--                        [type]="'content providers'"-->
<!--                        (pageChange)="updatePage($event)"-->
<!--                        [page]="page" [pageSize]="pageSize"-->
<!--                        [totalResults]="results.size">-->
<!--        </no-load-paging>-->
<!--          -->
<!--            <table class="uk-table uk-table-striped">-->
<!--                <thead>-->
<!--                    <tr>-->
<!--                        <th class="uk-text-center">Content Provider Name</th>-->
<!--                        <th *ngIf="fetchPublications.results.length > 0 || fetchPublications.searchUtils.status == errorCodes.ERROR"-->
<!--                            class="uk-text-center">-->
<!--                          Number of Publications-->
<!--                        </th>-->
<!--                        <th *ngIf="fetchDatasets.results.length > 0 || fetchDatasets.searchUtils.status == errorCodes.ERROR"-->
<!--                            class="uk-text-center">-->
<!--                          Number of Research Data-->
<!--                        </th>-->
<!--                        <th *ngIf="fetchSoftware.results.length > 0 || fetchSoftware.searchUtils.status == errorCodes.ERROR"-->
<!--                            class="uk-text-center">-->
<!--                          Number of Software-->
<!--                        </th>-->
<!--                        <th *ngIf="fetchOrps.results.length > 0 || fetchOrps.searchUtils.status == errorCodes.ERROR"-->
<!--                            class="uk-text-center">-->
<!--                          Number of Other Research Products-->
<!--                        </th>-->
<!--                    </tr>-->
<!--                </thead>-->
<!--                <tbody>-->
<!--                  <ng-container *ngIf="results">-->
<!--                      <ng-container *ngFor="let id of getKeys(results); let i=index">-->
<!--                        <tr *ngIf="i>=(page-1)*pageSize && i<page*pageSize">-->
<!--                          <td class="uk-text-center">-->
<!--                              <a [queryParams]="{datasourceId: id}" routerLinkActive="router-link-active" routerLink="/search/dataprovider" (click)="onLinkClick()">-->
<!--                                  {{results.get(id).name}}-->
<!--                              </a>-->
<!--                          </td>-->
<!--                          <td *ngIf="fetchPublications.results.length > 0" class="uk-text-center">-->
<!--&lt;!&ndash;                            *ngIf="results.get(id).countPublications > 0"&ndash;&gt;-->
<!--                            <a -->
<!--                                [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'f1', 'fv1', 'type', 'qf'], ['resulthostingdatasourceid', id, 'collectedfromdatasourceid', dataproviderId, 'publications', 'false'])"-->
<!--                                routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults" (click)="onLinkClick()">-->
<!--                                  {{results.get(id).countPublications | number}}-->
<!--                            </a>-->
<!--&lt;!&ndash;                            <span *ngIf="results.get(id).countPublications <= 0">-</span>&ndash;&gt;-->
<!--                          </td>-->
<!--                          <td *ngIf="fetchPublications.searchUtils.status == errorCodes.ERROR" class="uk-text-center">-</td>-->

<!--                          <td *ngIf="fetchDatasets.results.length > 0" class="uk-text-center">-->
<!--&lt;!&ndash;                            *ngIf="results.get(id).countDatasets > 0"&ndash;&gt;-->
<!--                            <a  -->
<!--                                [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'f1', 'fv1', 'type', 'qf'], ['resulthostingdatasourceid', id, 'collectedfromdatasourceid', dataproviderId, 'datasets', 'false'])"-->
<!--                                routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults" (click)="onLinkClick()">-->
<!--                                  {{results.get(id).countDatasets | number}}-->
<!--                            </a>-->
<!--&lt;!&ndash;                            <span *ngIf="results.get(id).countDatasets <= 0">-</span>&ndash;&gt;-->
<!--                          </td>-->
<!--                          <td *ngIf="fetchDatasets.searchUtils.status == errorCodes.ERROR" class="uk-text-center">-</td>-->

<!--                          <td *ngIf="fetchSoftware.results.length > 0" class="uk-text-center">-->
<!--&lt;!&ndash;                            *ngIf="results.get(id).countSoftware > 0"&ndash;&gt;-->
<!--                            <a  -->
<!--                                [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'f1', 'fv1', 'type', 'qf'], ['resulthostingdatasourceid', id, 'collectedfromdatasourceid', dataproviderId, 'software', 'false'])"-->
<!--                                routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults" (click)="onLinkClick()">-->
<!--                                  {{results.get(id).countSoftware | number}}-->
<!--                            </a>-->
<!--&lt;!&ndash;                            <span *ngIf="results.get(id).countSoftware <= 0">-</span>&ndash;&gt;-->
<!--                          </td>-->
<!--                          <td *ngIf="fetchSoftware.searchUtils.status == errorCodes.ERROR" class="uk-text-center">-</td>-->

<!--                          <td *ngIf="fetchOrps.results.length > 0" class="uk-text-center">-->
<!--&lt;!&ndash;                            *ngIf="results.get(id).countOrps > 0"&ndash;&gt;-->
<!--                            <a -->
<!--                                [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'f1', 'fv1', 'type', 'qf'], ['resulthostingdatasourceid', id, 'collectedfromdatasourceid', dataproviderId, 'other', 'false'])"-->
<!--                                routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults" (click)="onLinkClick()">-->
<!--                                  {{results.get(id).countOrps | number}}-->
<!--                            </a>-->
<!--&lt;!&ndash;                            <span *ngIf="results.get(id).countOrps <= 0">-</span>&ndash;&gt;-->
<!--                          </td>-->
<!--                          <td *ngIf="fetchOrps.searchUtils.status == errorCodes.ERROR" class="uk-text-center">-</td>-->
<!--                        </tr>-->
<!--                      </ng-container>-->
<!--                    </ng-container>-->
<!--                </tbody>-->
<!--            </table>-->
<!--        </div>-->


    <errorMessages  [status]="[fetchResults.searchUtils.status]"
                    [type]="'related content providers'" tab_error_class=true>
    </errorMessages>
    
    <div *ngIf="fetchResults.searchUtils.status == errorCodes.DONE && !loading">
      <div class="uk-text-muted uk-text-small uk-margin-bottom">
        *Only top 100 content providers that host research outcomes and are aggregated by {{collectedFromName}} are shown.
      </div>
      <no-load-paging *ngIf="results.length >pageSize"
                      [type]="'content providers'"
                      (pageChange)="updatePage($event)"
                      [page]="page" [pageSize]="pageSize"
                      [totalResults]="results.length">
      </no-load-paging>
    
      <table class="uk-table uk-table-striped">
        <thead>
        <tr>
          <th class="uk-text-center">Content Provider Name</th>
          <th *ngIf="fetchResults.results.length > 0 || fetchResults.searchUtils.status == errorCodes.ERROR"
              class="uk-text-center">
            Number of Research Outcomes
          </th>
        </tr>
        </thead>
        <tbody>
          <ng-container *ngIf="results">
            <ng-container *ngFor="let result of results; let i=index">
              <tr *ngIf="i>=(page-1)*pageSize && i<page*pageSize">
                <td class="uk-text-center">
                  <a [queryParams]="{datasourceId: result.id}" routerLinkActive="router-link-active" routerLink="/search/dataprovider"
                     (click)="onLinkClick()">
                    {{result.name}}
                  </a>
                </td>
                <td *ngIf="fetchResults.results.length > 0" class="uk-text-center">
                  <a
                    [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'f1', 'fv1', 'f2', 'fv2', 'qf'], ['collectedfromdatasourceid', dataproviderId, 'resulthostingdatasourceid,or', dataproviderId, 'resulthostingdatasourceid', result.id, 'false'])"
                    routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults"
                    (click)="onLinkClick()">
                    {{result.count | number}}
                  </a>
                </td>
              </tr>
            </ng-container>
          </ng-container>
        </tbody>
      </table>
      <no-load-paging *ngIf="results.length >pageSize"
                      [type]="'content providers'"
                      (pageChange)="updatePage($event)"
                      [page]="page" [pageSize]="pageSize"
                      [totalResults]="results.length">
      </no-load-paging>
    </div>
  `
})

export class RelatedDatasourcesTabComponent {
    @Input() dataproviderId: string;
    // @Input() fetchPublications : FetchResearchResults;
    // @Input() fetchDatasets : FetchResearchResults;
    // @Input() fetchSoftware : FetchResearchResults;
    // @Input() fetchOrps: FetchResearchResults;
    @Input() fetchResults: FetchResearchResults;

    // true: preprocessing is not over
    @Input() loading: boolean = true;
    // Εvery content provider's id is a single key of a map
    //@Input() results: Map<string, {"name": string, "countPublications": string, "countDatasets": string, "countSoftware": string, "countOrps": string}>;
    @Input() results: {"id": string, "name": string, "count": number}[];
    @Input() properties:EnvProperties ;
    @Input() collectedFromName: string ="[no title available]";
    @Input() modal: AlertModal;

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

    public page: number = 1;
    public pageSize: number = 10;

    constructor () {}

    ngOnInit() {}

    ngOnDestroy() {}

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

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

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

    public onLinkClick() {
      if(this.modal) {
        this.modal.cancel();
      }
    }
}