import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Observable}       from 'rxjs';
import {ErrorCodes} from '../../utils/properties/errorCodes';

@Component({
    selector: 'search-paging',
    template: `
    <div class= "paging-hr searchPaging uk-margin-small-bottom"
         *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)">
      <div class="uk-panel uk-margin-small-top uk-grid  uk-flex uk-flex-middle">
        <div class="uk-width-1-1@s uk-width-1-2@m  uk-text-uppercase" 
             *ngIf="results && searchUtils.totalResults > 0">
          {{searchUtils.totalResults|number}}
          <span class="uk-text-muted uk-text-uppercase"> {{type}}, page </span>
          {{searchUtils.page | number}}
          <span class="uk-text-muted uk-text-uppercase"> of </span>
          {{(totalPages(searchUtils.totalResults)|number)}}
        </div>
        <div class="uk-width-1-1@s uk-width-1-2@m" 
             *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
          {{oldTotalResults|number}}
          <span class="uk-text-muted uk-text-uppercase"> {{type}}, page </span>
          {{searchUtils.page | number}}
          <span class="uk-text-muted uk-text-uppercase"> of </span>
          {{(totalPages(oldTotalResults)|number)}}
        </div>
        <!--div class="uk-width-1-1@s uk-width-1-2@m" *ngIf="results && searchUtils.totalResults > 0">
          {{searchUtils.totalResults|number}} {{type}}, page {{searchUtils.page | number}} of {{(totalPages(searchUtils.totalResults)|number)}}
        </div>
        <div class="uk-width-1-1@s uk-width-1-2@m" *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
          {{oldTotalResults|number}} {{type}}, page {{searchUtils.page | number}} of {{(totalPages(oldTotalResults)|number)}}
        </div-->
        <div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand" *ngIf="results && searchUtils.totalResults > searchUtils.size">
          <paging [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults"  [baseUrl]="baseUrl" 
                  [size]="searchUtils.size"  [parameterNames] = "parameterNames" [parameterValues] = "parameterValues"
                  [isDisabled]="isDisabled"> 
          </paging>
        </div>
        <div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand" *ngIf="!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING">
          <paging [currentPage]="searchUtils.page" [totalResults]="oldTotalResults"  [baseUrl]="baseUrl" 
                  [size]="searchUtils.size"  [parameterNames] = "parameterNames" [parameterValues] = "parameterValues"
                  [isDisabled]="isDisabled"> 
          </paging>
        </div>
      </div>
    </div>
    `
})

export class SearchPagingComponent {
    @Input() isDisabled: boolean = false;
    @Input() searchUtils;
    @Input() results;
    @Input() baseUrl;
    @Input() type;
    @Input() parameterNames:string[];
    @Input() parameterValues:string[];

    @Input() loadPaging: boolean = true;
    @Input() oldTotalResults: number = 0;

    public totalResults: number = 0;
    public errorCodes:ErrorCodes = new ErrorCodes();

    // @Input() totalResults:number = 0;
    constructor () {}

    ngOnInit() {
      // this.totalResults = this.searchUtils.totalResults;
      // if(!this.loadPaging && this.totalResults == 0) {
      //   this.totalResults = this.oldTotalResults;
      // }
    }

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


}