import { Component, ViewEncapsulation, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { FormControl } from '@angular/forms';
import { MatSelectionList } from '@angular/material';

@Component({
	selector: 'app-facet-section-component',
	templateUrl: './facet-search-section.component.html',
	styleUrls: ['./facet-search-section.component.scss'],
	encapsulation: ViewEncapsulation.None,
})
export class FacetSearchSectionComponent implements OnInit {

	@Input()
	searchEnabled = false;

	@Input()
	filterOptions: (value) => Observable<any[]>;

	@Input()
	options: Observable<any[]> = Observable.of([]);

	@Input()
	displayTitleFunc: (value) => string;

	@Input()
	displayValueFunc: (value) => string;

	@Output()
	selectedChanged = new EventEmitter();

	@Output()
	optionRemoved = new EventEmitter();

	optionSearchControl = new FormControl('');

	private selectedOptions: any[] = [];

	@ViewChild('optionsList') selectionList: MatSelectionList;


	ngOnInit(): void {
		this.optionSearchControl.valueChanges.subscribe(x => { if (this.filterOptions) { this.options = this.filterOptions(x); } });
	}

	public selectionChanged(event: any) {
		this.selectedChanged.emit(event);
	}

	public removeOption(project) {
		const list = this.selectionList.selectedOptions.selected.map(x => x.value);
		const indexOfProject = list.indexOf(project);
		if (this.selectionList.selectedOptions.selected[indexOfProject]) {
			this.selectionList.selectedOptions.selected[indexOfProject].selected = false;
			this.selectionList.selectedOptions.selected.splice(indexOfProject, 1);
		}
		this.optionRemoved.emit(project);
	}

	public isOptionSelected(value) {
		return this.selectedOptions.indexOf(value) !== -1;
	}

	displayLabel(value) {
		return this.displayTitleFunc ? this.displayTitleFunc(value) : value;
	}

	displayValue(value) {
		return this.displayValueFunc ? this.displayValueFunc(value) : value;
	}
}