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

import {Router, ActivatedRoute} from '@angular/router';
import {RouterHelper} from '../../utils/routerHelper.class';
@Component({
    selector: 'search-results-per-page',
    template: `
    <!--div class= "searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom"-->

      <!--form class="uk-form-horizontal uk-width-1-2">
        <div class="uk-form-label inherit-color">Results per page:</div>
        <div class="uk-form-controls">
          <select class="uk-select" id="form-horizontal-select" name="select_results_per_page"
                  [(ngModel)]="searchUtils.size" (ngModelChange)="navigate(searchUtils.size)">
            <option [ngValue]="5" > 5</option>
            <option [ngValue]="10">10</option>
            <option [ngValue]="20">20</option>
            <option [ngValue]="50">50</option>
          </select>
        </div>
      </form-->

          <!--select class="uk-select uk-width-2-3" id="form-horizontal-select" name="select_results_per_page"
                  [(ngModel)]="searchUtils.size" (ngModelChange)="navigate(searchUtils.size)">
            <option [ngValue]="5" > 5 Results per page</option>
            <option [ngValue]="10">10 Results per page</option>
            <option [ngValue]="20">20 Results per page</option>
            <option [ngValue]="50">50 Results per page</option>
          </select-->
    <!--/div-->

    <!--span>Results per page:</span>
    <span>
      <ul class="uk-subnav uk-subnav-divider">
        <li [class]="searchUtils.size == 5  ? 'uk-active' : ''"><a  [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',5)"  routerLinkActive="router-link-active" [routerLink]=baseUrl> 5</a></li>
        <li [class]="searchUtils.size == 10 ? 'uk-active' : ''"><a  [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',10)" routerLinkActive="router-link-active" [routerLink]=baseUrl>10</a></li>
        <li [class]="searchUtils.size == 20 ? 'uk-active' : ''"><a  [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',20)" routerLinkActive="router-link-active" [routerLink]=baseUrl>20</a></li>
        <li [class]="searchUtils.size == 50 ? 'uk-active' : ''"><a  [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',50)" routerLinkActive="router-link-active" [routerLink]=baseUrl>50</a></li>
      </ul>
    </span-->

    <!--ul class="uk-subnav uk-subnav-divider">
      <li>Results per page:</li>
      <li [class]="searchUtils.size == 5  ? 'uk-active' : ''"><a  [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',5)"  routerLinkActive="router-link-active" [routerLink]=baseUrl> 5</a></li>
      <li [class]="searchUtils.size == 10 ? 'uk-active' : ''"><a  [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',10)" routerLinkActive="router-link-active" [routerLink]=baseUrl>10</a></li>
      <li [class]="searchUtils.size == 20 ? 'uk-active' : ''"><a  [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',20)" routerLinkActive="router-link-active" [routerLink]=baseUrl>20</a></li>
      <li [class]="searchUtils.size == 50 ? 'uk-active' : ''"><a  [queryParams]="routerHelper.createQueryParamsResultsPerPage(parameterNames,parameterValues,'size',50)" routerLinkActive="router-link-active" [routerLink]=baseUrl>50</a></li>
    </ul-->
<!--[(ngModel)]="searchUtils.size" (ngModelChange)="navigate(searchUtils.size)"-->
<!--[(ngModel)]="=size" (ngModelChange)="sizeChanged()"-->
    <span class="uk-width-2-3@m uk-width-1-1@s">
      <span class="uk-width-5-6@m"> Results per page:</span>
      <select class="uk-select uk-width-1-6@m uk-width-auto" id="form-horizontal-select" name="select_results_per_page"
              [(ngModel)]="size" (ngModelChange)="sizeChanged()">
        <option [ngValue]="5" > 5</option>
        <option [ngValue]="10">10</option>
        <option [ngValue]="20">20</option>
        <option [ngValue]="50">50</option>
      </select>
    </span>
    `
})

export class SearchResultsPerPageComponent {
    @Input() size: number;
    @Output() sizeChange  = new EventEmitter();

    constructor () {}

    ngOnInit() {}

    sizeChanged() {
      this.sizeChange.emit({
          value: this.size
      });
    }
    /*navigate(size: number) {
      this.searchUtils.page = 1;
      console.info(size);
      console.info(this.baseUrl);
      this._router.navigate([this.baseUrl], { queryParams:  this.routerHelper.createQueryParamsResultsPerPage(this.parameterNames,this.parameterValues,'size',size)});
    }*/
}