import { Component, OnInit, Input, ContentChild, TemplateRef, ViewChild, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl, FormArray, AbstractControl } from '@angular/forms';
import { ExternalSourcesUrlModel } from '../../../../models/external-sources/ExternalSourcesUrlModel';
import { AutoCompleteConfiguration } from '../../auto-complete/AutoCompleteConfiguration';

@Component({
	selector: 'app-external-item-listing',
	templateUrl: './external-item-listing.component.html',
	styleUrls: ['./external-item-listing.component.scss']
})
export class ExternalItemListingComponent implements OnInit {
	@Input()
	public placeholder: string;

	@Input()
	public formGroup: AbstractControl;

	@Input()
	public autoCompleteConfiguration: AutoCompleteConfiguration;

	@Input()
	public displayFunction: Function;

	@Input()
	public subtitleFunction: Function;

	@Input()
	public disabled = true;

	@Input()
	public viewOnly = false;

	@Input()
	public titleKey: string;

	@Input()
	parentTemplate;

	@Input()
	public options: Array<ExternalSourcesUrlModel>;

	@Output()
	public onItemChange = new EventEmitter<any>();

	public choice: string;
	public formControl = new FormControl();
	enabled = true;

	ngOnInit() {
		if (this.disabled) { this.formControl.disable(); }
	}

	onItemChangeFunc(event) {
		if (event) { this.onItemChange.emit(event); }
	}

	selectionChange(event) {
		if (this.formControl.disabled) { this.formControl.enable(); }
		this.autoCompleteConfiguration.requestItem.criteria['type'] = event.value;
		this.autoCompleteConfiguration.refreshEvent.next(true);
	}

	deleteItem(name: number) {
		(<FormArray>this.formGroup).removeAt(name);
	}
}