import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { takeUntil } from 'rxjs/operators';
import { DataManagementPlanCriteria } from '../../../../models/criteria/data-management-plan/DataManagementPlanCriteria';
import { DataManagementPlanCriteriaErrorModel } from '../../../../models/criteria/data-management-plan/DataManagementPlanCriteriaErrorModel';
import { ProjectCriteria } from '../../../../models/criteria/project/ProjectCriteria';
import { RequestItem } from '../../../../models/criteria/RequestItem';
import { ProjectModel } from '../../../../models/projects/ProjectModel';
import { ProjectService } from '../../../../services/project/project.service';
import { MultipleAutoCompleteConfiguration } from '../../autocompletes/multiple/multiple-auto-complete-configuration';
import { BaseCriteriaComponent } from '../base/base-criteria.component';

@Component({
	selector: 'app-dmp-criteria-component',
	templateUrl: './dmp-criteria.component.html',
	styleUrls: ['./dmp-criteria.component.scss'],
})

export class DataManagementPlanCriteriaComponent extends BaseCriteriaComponent implements OnInit {

	@Input()
	showProject: boolean;
	filteringProjectsAsync = false;
	filteredProjects: ProjectModel[];
	projectAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
	public formGroup = new FormBuilder().group({
		like: new FormControl(),
		projects: new FormControl()
	});

	constructor(
		public language: TranslateService,
		public projectService: ProjectService,
		public formBuilder: FormBuilder
	) {
		super(new DataManagementPlanCriteriaErrorModel());
	}

	ngOnInit() {
		super.ngOnInit();

		this.projectAutoCompleteConfiguration = {
			filterFn: this.filterProject.bind(this),
			initialItems: (excludedItems: any[]) => this.filterProject('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
			displayFn: (item) => item['label'],
			titleFn: (item) => item['label'],
			//mapFn: (item) => new JsonSerializer<ProjectReference>().fromJSONArray(item, ProjectReference).map(item => item.toDropdownList()),
			loadDataOnStart: true
		};

		this.formGroup.get('projects').valueChanges
			.pipe(takeUntil(this._destroyed))
			.subscribe(x => this.controlModified());
		this.formGroup.get('like').valueChanges
			.pipe(takeUntil(this._destroyed))
			.subscribe(x => this.controlModified());
		//if (this.criteria == null) { this.criteria = new DataManagementPlanCriteria(); }
	}

	setCriteria(criteria: DataManagementPlanCriteria): void {
		this.formGroup.get('like').patchValue(criteria.like);
		this.formGroup.get('projects').patchValue(criteria.projects);
	}

	onCallbackError(error: any) {
		this.setErrorModel(error.error);
	}

	controlModified(): void {
		this.clearErrorModel();
		if (this.refreshCallback != null &&
			(this.formGroup.get('like').value == null || this.formGroup.get('like').value.length === 0 || this.formGroup.get('like').value.length > 2)
		) {
			this.refreshCallback();
		}
	}

	filterProject(query: string) {
		const projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
		projectRequestItem.criteria = new ProjectCriteria();
		projectRequestItem.criteria.like = query;
		return this.projectService.getWithExternal(projectRequestItem);
	}
}