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

import { FetchPublications } from '../../utils/fetchEntitiesClasses/fetchPublications.class';
import { FetchDatasets } from '../../utils/fetchEntitiesClasses/fetchDatasets.class';
import { FetchSoftware } from '../../utils/fetchEntitiesClasses/fetchSoftware.class';
import { FetchOrps } from '../../utils/fetchEntitiesClasses/fetchOrps.class';

import { ErrorCodes} from '../../utils/properties/errorCodes';
import {RouterHelper} from '../../utils/routerHelper.class';
import { Observable } from 'rxjs/Observable';
import{EnvProperties} from '../../utils/properties/env-properties';

@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">
            <div *ngIf="results && results.size > pageSize" class="uk-margin">
              <span class="uk-text-bold">{{results.size | number}} related content providers, page {{page | number}} of {{totalPages(results.size) | number}}</span>
              <paging-no-load class="uk-float-right" [currentPage]="page" [totalResults]="results.size" [size]="pageSize" (pageChange)="updatePage($event)"></paging-no-load>
            </div>

            <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">
                                  {{results.get(id).name}}
                              </a>
                          </td>
                          <td *ngIf="fetchPublications.results.length > 0" class="uk-text-center">
                              <a  [queryParams]="routerHelper.createQueryParams(['hostedBy', 'hs', 'collectedFrom', 'cl'], [id, 'and', dataproviderId, 'and'])"
                                  routerLinkActive="router-link-active" [routerLink]="linkToSearchPublications">
                                      {{results.get(id).countPublications | number}}
                              </a>
                          </td>
                          <td *ngIf="fetchPublications.searchUtils.status == errorCodes.ERROR" class="uk-text-center">-</td>

                          <td *ngIf="fetchDatasets.results.length > 0" class="uk-text-center">
                              <a  [queryParams]="routerHelper.createQueryParams(['hostedBy', 'hs', 'collectedFrom', 'cl'], [id, 'and', dataproviderId, 'and'])"
                                  routerLinkActive="router-link-active" [routerLink]="linkToSearchResearchData">
                                      {{results.get(id).countDatasets | number}}
                              </a>
                          </td>
                          <td *ngIf="fetchDatasets.searchUtils.status == errorCodes.ERROR" class="uk-text-center">-</td>

                          <td *ngIf="fetchSoftware.results.length > 0" class="uk-text-center">
                              <a  [queryParams]="routerHelper.createQueryParams(['hostedBy', 'hs', 'collectedFrom', 'cl'], [id, 'and', dataproviderId, 'and'])"
                                  routerLinkActive="router-link-active" [routerLink]="linkToSearchSoftware">
                                      {{results.get(id).countSoftware | number}}
                              </a>
                          </td>
                          <td *ngIf="fetchSoftware.searchUtils.status == errorCodes.ERROR" class="uk-text-center">-</td>

                          <td *ngIf="fetchOrps.results.length > 0" class="uk-text-center">
                              <a  [queryParams]="routerHelper.createQueryParams(['hostedBy', 'hs', 'collectedFrom', 'cl'], [id, 'and', dataproviderId, 'and'])"
                                  routerLinkActive="router-link-active" [routerLink]="linkToSearchOrps">
                                      {{results.get(id).countOrps | number}}
                              </a>
                          </td>
                          <td *ngIf="fetchOrps.searchUtils.status == errorCodes.ERROR" class="uk-text-center">-</td>
                        </tr>
                      </ng-container>
                    </ng-container>
                </tbody>
            </table>
        </div>
    `
})

export class RelatedDatasourcesTabComponent {
    @Input() dataproviderId: string;
    @Input() fetchPublications : FetchPublications;
    @Input() fetchDatasets : FetchDatasets;
    @Input() fetchSoftware : FetchSoftware;
    @Input() fetchOrps: FetchOrps;

    // 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() properties:EnvProperties ;

    public linkToSearchPublications: string = "";
    public linkToSearchResearchData: string = "";
    public linkToSearchSoftware: string = "";
    public linkToSearchOrps: string = "";

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

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

    constructor () {}

    ngOnInit() {
      this.linkToSearchPublications = this.properties.searchLinkToAdvancedPublications;
      this.linkToSearchResearchData = this.properties.searchLinkToAdvancedDatasets;
      this.linkToSearchSoftware     = this.properties.searchLinkToAdvancedSoftware;
      this.linkToSearchOrps         = this.properties.searchLinkToAdvancedOrps;
    }

    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());
    }
}