import { Component, ViewEncapsulation, OnInit, Input, ViewChild } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { DataManagementPlanService } from '../../../../services/data-management-plan/data-management-plan.service';
import { RequestItem } from '../../../../models/criteria/RequestItem';
import { DynamicFieldProjectCriteria, DynamicFieldProjectCriteriaDependencies } from '../../../../models/dynamic-field-project/DynamicFieldProjectCriteria';
import { AutoCompleteComponent } from '../../../../shared/components/auto-complete/auto-complete.component';
import { DynamicFieldDependency } from '../../../../models/data-managemnt-plans/DynamicFieldDependency';
import { LanguageResolverService } from '../../../../services/language-resolver/language-resolver.service';
import { AutoCompleteConfiguration } from '../../../../shared/components/auto-complete/AutoCompleteConfiguration';

@Component({
	selector: 'app-dynamic-field-project',
	templateUrl: 'dynamic-field-project.component.html',
	styleUrls: ['./dynamic-field-project.component.scss'],
	encapsulation: ViewEncapsulation.None
})
export class DynamicFieldProjectComponent implements OnInit {

	constructor(private languageResolverService: LanguageResolverService, private dmpService: DataManagementPlanService) { }

	@Input()
	dependencies: Array<FormGroup>;

	@Input()
	formGroup: FormGroup;

	@ViewChild(AutoCompleteComponent)
	autocomplete: AutoCompleteComponent;

	autoCompleteConfiguration: AutoCompleteConfiguration;

	ngOnInit(): void {
		const requestItem = new RequestItem<DynamicFieldProjectCriteria>();
		requestItem.criteria = { id: this.formGroup.get('id').value, dynamicFields: this.buildDependencies() };
		this.autoCompleteConfiguration = new AutoCompleteConfiguration(this.dmpService.getDynamicField.bind(this.dmpService), requestItem);
	}

	hasUnResolvedDependencies() {
		if (this.dependencies == null || this.dependencies.length === 0) {
			if (this.formGroup.get('value').disabled) {
				this.updateConfiguration();
				this.formGroup.get('value').enable({ onlySelf: true, emitEvent: false });
			}
			return false;
		}
		for (let i = 0; i < this.dependencies.length; i++) {
			if (!this.dependencies[i].get('value').value) {
				this.formGroup.get('value').disable({ onlySelf: true, emitEvent: false });
				return true;
			}
		}
		if (this.formGroup.get('value').disabled) {
			this.updateConfiguration();
			this.formGroup.get('value').enable({ onlySelf: true, emitEvent: false });
		}
		return false;
	}

	updateConfiguration() {
		const requestItem = new RequestItem<DynamicFieldProjectCriteria>();
		requestItem.criteria = { id: this.formGroup.get('id').value, dynamicFields: this.buildDependencies() };
		this.autoCompleteConfiguration = new AutoCompleteConfiguration(this.dmpService.getDynamicField.bind(this.dmpService), requestItem);
		this.autocomplete.inputData = this.autoCompleteConfiguration;
	}

	buildDependencies(): Array<DynamicFieldProjectCriteriaDependencies> {
		if (!this.dependencies || this.dependencies.length === 0) { return []; }
		const dependencies = new Array<DynamicFieldProjectCriteriaDependencies>();
		for (let i = 0; i < this.dependencies.length; i++) {
			dependencies.push({ property: this.dependencies[i].get('id').value, value: this.assignFunction(this.dependencies[i].get('value').value) });
		}
		return dependencies;
	}

	displayFunction(item: any): any {
		if (!item) { return null; }
		return item['label'];
	}

	assignFunction(item: any): any {
		if (!item) { return null; }
		return item['id'];
	}
}