import { TranslateService } from '@ngx-translate/core';
import { Component, OnInit, Input } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { BaseCriteriaComponent } from '../base/base-criteria.component';
import { ValidationContext, Validation } from '../../../../utilities/validators/ValidationContext';
import { BackendErrorValidator } from '../../../../utilities/validators/BackendErrorValidator';
import { DataManagementPlanCriteria } from '../../../../models/criteria/data-management-plan/DataManagementPlanCriteria';
import { DataManagementPlanCriteriaErrorModel } from '../../../../models/criteria/data-management-plan/DataManagementPlanCriteriaErrorModel';
import { ProjectModel } from '../../../../models/projects/ProjectModel';
import { ProjectService } from '../../../../services/project/project.service';
import { ProjectCriteria } from '../../../../models/criteria/project/ProjectCriteria';
import { RequestItem } from '../../../../models/criteria/RequestItem';
import { create } from 'domain';
import { MultipleAutoCompleteConfiguration } from '../../autocompletes/multiple/multiple-auto-complete-configuration';

@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: boolean = 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(x => excludedItems.map(x => x.id).indexOf(x.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.subscribe(x => this.controlModified())
    this.formGroup.get('like').valueChanges.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) {
    let projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
    projectRequestItem.criteria = new ProjectCriteria();
    projectRequestItem.criteria.like = query;
    return this.projectService.getWithExternal(projectRequestItem);
  }
}