import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../../../../core/common/base/base.component';
import { DatasetProfileComboBoxType } from '../../../../../core/common/enum/dataset-profile-combo-box-type';
import { DatasetProfileFieldViewStyle } from '../../../../../core/common/enum/dataset-profile-field-view-style';
import { DatasetExternalAutocompleteCriteria } from '../../../../../core/query/dataset/daatset-external-autocomplete-criteria';
import { RequestItem } from '../../../../../core/query/request-item';
import { DatasetExternalAutocompleteService } from '../../../../../core/services/dataset/dataset-external-autocomplete.service';
import { SingleAutoCompleteConfiguration } from '../../../../../library/auto-complete/single/single-auto-complete-configuration';
import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';

@Component({
	selector: 'app-form-field',
	templateUrl: './form-field.component.html',
	styleUrls: ['./form-field.component.scss']
})
export class FormFieldComponent extends BaseComponent implements OnInit {

	// @Input() field: Field;
	@Input() form: FormGroup;
	@Input() datasetProfileId: String;

	// change: Subscription;
	// trackByFn = (index, item) => item ? item['id'] : null;

	public singleAutoCompleteConfiguration: SingleAutoCompleteConfiguration;
	datasetProfileFieldViewStyleEnum = DatasetProfileFieldViewStyle;
	datasetProfileComboBoxTypeEnum = DatasetProfileComboBoxType;

	constructor(
		public visibilityRulesService: VisibilityRulesService,
		private datasetExternalAutocompleteService: DatasetExternalAutocompleteService
	) { super(); }

	ngOnInit() {
		//if (this.field) {

		// Setup autocomplete configuration if needed
		if (this.form.get('viewStyle').value.renderStyle === DatasetProfileFieldViewStyle.ComboBox && this.form.get('data').value.type === DatasetProfileComboBoxType.Autocomplete) {
			this.singleAutoCompleteConfiguration = {
				filterFn: this.searchFromAutocomplete.bind(this),
				initialItems: (extraData) => this.searchFromAutocomplete(''),
				displayFn: (item) => item['label'],
				titleFn: (item) => item['label']
			};
		}

		// this.form = this.visibilityRulesService.getFormGroup(this.field.id);
		this.form.get('value').valueChanges
			.pipe(takeUntil(this._destroyed))
			.subscribe(item => {
				this.visibilityRulesService.updateValueAndVisibility(this.form.get('id').value, item);
			});
	}
	// }

	searchFromAutocomplete(query: string) {
		const autocompleteRequestItem: RequestItem<DatasetExternalAutocompleteCriteria> = new RequestItem();
		autocompleteRequestItem.criteria = new DatasetExternalAutocompleteCriteria();

		autocompleteRequestItem.criteria.fieldID = this.form.get('id').value;
		autocompleteRequestItem.criteria.profileID = this.datasetProfileId;
		return this.datasetExternalAutocompleteService.queryAutocomplete(autocompleteRequestItem);
	}

	assignDropdownItem(item: any) {
		if (!item) { return null; }
		return (typeof item === 'string') ? JSON.parse(item) : JSON.stringify(item);
	}
}