import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Observable}       from 'rxjs/Observable';

import {Router, ActivatedRoute} from '@angular/router';
import {RouterHelper} from '../../utils/routerHelper.class';
@Component({
    selector: 'search-sorting',
    template: `
      <!--form class="uk-form-horizontal uk-width-1-1">
        <div class="uk-form-label inherit-color">Sort By:</div>
        <div class="uk-form-controls">
          <select class="uk-select" id="form-horizontal-select" name="select_sort_results"
                  [(ngModel)]="sortBy" (ngModelChange)="navigateSort(sortBy)">
            <option value="">Relevance score</option>
            <option value="resultdateofacceptance,descending">Year</option>
          </select>
        </div>
      </form-->

      <!--select class="uk-select uk-width-2-3 uk-float-right" id="form-horizontal-select" name="select_sort_results"
              [(ngModel)]="sortBy" (ngModelChange)="navigateSort(sortBy)">
        <option value="">Most relevant first</option>
        <option value="resultdateofacceptance,descending">Most recent first</option>
      </select-->

      <span class="uk-width-2-3@m uk-width-1-1@s uk-float-right">
        <span class="uk-width-1-4"> Sort by:</span>
        <select class="uk-select uk-width-3-4@m uk-width-auto" id="form-horizontal-select" name="select_results_per_page"
                [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()">
                <option value="">Relevance</option>
                <option value="resultdateofacceptance,descending">Date (most recent)</option>
                <option value="resultdateofacceptance,ascending">Date (least recent)</option>
        </select>
      </span>

      <!--ul class="uk-subnav uk-subnav-pill">
        <li [class]="sortBy == ''  ? 'uk-active' : ''"><a  [queryParams]="routerHelper.createQueryParams(parameterNames,parameterValues)"  routerLinkActive="router-link-active" [routerLink]=baseUrl>Sort by Relevance</a></li>
        <li [class]="sortBy == 'resultdateofacceptance,descending'? 'uk-active' : ''"><a  [queryParams]="routerHelper.createQueryParamsSortBy(parameterNames,parameterValues,'sortBy',sortBy)" routerLinkActive="router-link-active" [routerLink]=baseUrl>Sort by Date</a></li>
      </ul-->
    `
})

export class SearchSortingComponent {
    /*@Input() searchUtils;
    @Input() baseUrl;
    @Input() parameterNames:string[];
    @Input() parameterValues:string[];
    */
    @Input() sortBy: string="";
    @Output() sortByChange  = new EventEmitter();

    //public routerHelper:RouterHelper = new RouterHelper();

    constructor (/*private route: ActivatedRoute, private _router: Router*/) {}

    ngOnInit() {}

    /*navigateSort(sortBy: string) {
      this.searchUtils.page = 1;

      console.info("sortBy="+sortBy);
      if(sortBy) {
        this._router.navigate([this.baseUrl], { queryParams: this.routerHelper.createQueryParamsSortBy(this.parameterNames, this.parameterValues, 'sortBy', sortBy)});
      } else {
        let index: number = this.parameterNames.findIndex(function(element) {
          return element == "sortBy";
        });
        console.info("index of sortby: "+index);
        if(index >= 0) {
          this.parameterNames.splice(index, 1);
          this.parameterValues.splice(index, 1);
        }
        this._router.navigate([this.baseUrl], { queryParams: this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)});
      }
    }*/

    sortByChanged() {
      this.sortByChange.emit({
          value: this.sortBy
      });
    }
}