import { FormControl, FormGroupDirective, NgForm, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs/Rx';
import { setTimeout } from 'timers';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/map';
import { AutoCompleteConfiguration } from './AutoCompleteConfiguration';
import { AutoCompleteItem } from './AutoCompleteItem';
import { ErrorStateMatcher } from '@angular/material';

@Component({
	selector: 'auto-complete',
	templateUrl: './autocomplete.component.html',
	styleUrls: ['./autocomplete.component.scss']
})
export class AutocompleteComponent implements OnInit {
	@Input()
	configuration: AutoCompleteConfiguration;

	@Input()
	mapper: Function;

	@Input()
	typeaheadMS: number;

	@Input()
	placeholder: String;

	@Input()
	validationErrorString: String;

	public errorStateMatcher: AutoCompleteErrorStateMatcher = new AutoCompleteErrorStateMatcher();

	@Input()
	required: boolean;

	@Input() selectedDropdownItem: AutoCompleteItem;
	@Output() selectedDropdownItemChange = new EventEmitter<AutoCompleteItem>();

	@Output()
	output: EventEmitter<AutoCompleteItem> = new EventEmitter<AutoCompleteItem>();

	@Input() form: FormGroup;

	@Input() createNew = false;
	//term = new FormControl();
	@Input()
	ClickFunctionCall: Function;

	loading = false;

	options: AutoCompleteItem[];
	constructor() {
	}

	ngOnInit() {
		const valueChanges = this.form.controls['text'].valueChanges.share();
		valueChanges.subscribe(searchTerm => {
			this.loading = true;
			if (this.form.controls['value'].value) {
				this.resetFormGroupValue();
			}
		});

		valueChanges
			.debounceTime(this.typeaheadMS)
			.subscribe(searchTerm => {
				if (typeof searchTerm === 'string') {
					this.inputOnChange(searchTerm)
				}
			});
	}

	resetFormGroupValue() {
		this.form.patchValue({ value: null }, { emitEvent: false });
	}

	// listingItemToDropDown(item: DropdownListingItem): AutoCompleteItem {
	// 	return (item as DropdownListingItem).toDropdownList();
	// }

	optionSelected(event: any) {
		this.form.patchValue(event.option.value, { emitEvent: false });
		this.selectedDropdownItemChange.emit(event.option.value);
		//this.form.updateValueAndValidity();
		this.options = [event.option.value];
		this.loading = false;
	}

	inputOnChange(term: string) {
		//this.form.patchValue({ value: null, description: '', text: '' });
		//this.form.updateValueAndValidity();
		this.configuration.criteria.like = term;
		this.configuration.callback(this.configuration.criteria)
			.map((res: any) => this.mapper(res))
			.subscribe(
			(res: AutoCompleteItem[]) => {
				this.options = res;
			},
			null,
			() => { this.loading = false });
	}

	displayFn(item: AutoCompleteItem): string {
		return item.text ? item.text : '';
	}

	//fieldHasErrors(control: FormControl, form: FormGroupDirective | NgForm): boolean {
	//    return this.errorStateMatcher(control, form);
	// }
}

export class AutoCompleteErrorStateMatcher implements ErrorStateMatcher {
	isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
		const isFormSubmitted = form && form.submitted;
		const isControlInvalid = control && control.invalid && (control.dirty || control.touched || isFormSubmitted);
		const isFormInvalid = form && form.enabled && form.invalid && (form.dirty || form.touched || isFormSubmitted)
		return !!(isControlInvalid || isFormInvalid);
	}
}