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

@Component({
    selector: 'search-sorting',
    template: `        
      <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 *ngIf="entityType != 'community'" 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>
        <select *ngIf="entityType == 'community'" 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="">Title</option>
                <option value="creationdate,descending">Creation Date (most recent)</option>
                <option value="creationdate,ascending">Creation Date (least recent)</option>
        </select>
      </span>
    `
})

export class SearchSortingComponent {

    @Input() sortBy: string = '';
    @Input() entityType: string = '';
    @Output() sortByChange  = new EventEmitter();


    constructor () {}

    ngOnInit() {}


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