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

@Component({
    selector: 'search-sorting',
    template: `
      <div class="uk-width-small">
				<div input *ngIf="(entityType != 'community' && entityType != 'stakeholder' )"
					type="select" placeholder="Sort by" inputClass="flat x-small"
					[options]="optionsA" [(value)]="sortBy" [disabled]="isDisabled"
					(valueChange)="sortByChanged()"></div>

				<div input *ngIf="(entityType == 'community' || entityType == 'stakeholder')"
					type="select" placeholder="Sort by" inputClass="flat x-small"
					[options]="optionsB" [(value)]="sortBy" [disabled]="isDisabled"
					(valueChange)="sortByChanged()"></div>
      </div>
    `
})

export class SearchSortingComponent {
    @Input() isDisabled: boolean = false;
    @Input() sortBy: string = '';
    @Input() entityType: string = '';
    @Output() sortByChange  = new EventEmitter();
		public optionsA = [
			{value: '', label: 'Relevance'},
			{value: 'resultdateofacceptance,descending', label: 'Date (most recent)'},
			{value: 'resultdateofacceptance,ascending', label: 'Date (least recent)'},
		];
		public optionsB = [
			{value: '', label: 'Title'},
			{value: 'creationdate,descending', label: 'Creation Date (most recent)'},
			{value: 'creationdate,ascending', label: 'Creation Date (least recent)'},
		];


    constructor () {}

    ngOnInit() {}


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