import { Component, Input, OnInit } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
import { MatSnackBar } from '@angular/material';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
import { BaseComponent } from "../../../core/common/base/base.component";
import { ProjectCriteria } from '../../../core/query/project/project-criteria';
import { RequestItem } from '../../../core/query/request-item';
import { SnackBarNotificationLevel, UiNotificationService } from '../../../core/services/notification/ui-notification-service';
import { ProjectService } from '../../../core/services/project/project.service';
import { SingleAutoCompleteConfiguration } from '../../../library/auto-complete/single/single-auto-complete-configuration';
import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service';
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
import { ProjectEditorWizardModel } from './project-editor-wizard-model';

@Component({
  selector: 'app-quick-wizard-project-editor-component',
  templateUrl: 'project-editor-wizard.component.html',
  styleUrls: ['./project-editor-wizard.component.scss']
})
export class ProjectEditorWizardComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
  breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);

  isNew = false;
  project: ProjectEditorWizardModel;
  @Input() formGroup: FormGroup;
  //formGroup: FormGroup = null;
  private uiNotificationService: UiNotificationService

  projectAutoCompleteConfiguration: SingleAutoCompleteConfiguration;

  constructor(
    public snackBar: MatSnackBar,
    private route: ActivatedRoute,
    public router: Router,
    public language: TranslateService,
    private projectService: ProjectService,
    public languageResolverService: LanguageResolverService,
  ) {
    super();
  }

  ngOnInit() {
    this.breadCrumbs = Observable.of([
      {
        parentComponentName: 'QuickCreate',
        label: 'Project',
        url: '/quick-wizard/project'
      }]
    );

    const projectRequestItem: RequestItem<ProjectCriteria> = new RequestItem();
    projectRequestItem.criteria = new ProjectCriteria();

    this.projectAutoCompleteConfiguration = {
      filterFn: this.searchProject.bind(this),
      initialItems: (extraData) => this.searchProject(''),
      displayFn: (item) => item['label'],
      titleFn: (item) => item['label']
    };

    if (!this.formGroup) {
      this.project = new ProjectEditorWizardModel();
      this.formGroup = this.project.buildForm();
    }

    this.formGroup.get('existProject').enable();
    this.formGroup.get('label').disable();
    this.formGroup.get('description').disable();



   
    // this.route.params
    //   .pipe(takeUntil(this._destroyed))
    //   .subscribe((params: Params) => {
    //     const itemId = params['id'];

    //     if (itemId != null) {
    //     	this.isNew = false;
    //     	this.projectService.getSingle(itemId).map(data => data as ProjectListingModel)
    //     		.pipe(takeUntil(this._destroyed))
    //     		.subscribe(data => {
    //     			this.project = new ProjectEditorModel().fromModel(data);
    //     			this.formGroup = this.project.buildForm(null, this.project.type === ProjectType.External || !this.editMode);
    //     			this.breadCrumbs = Observable.of([
    //     				{ parentComponentName: 'ProjectListingComponent', label: 'Projects', url: '/projects' },
    //     			]);
    //     		});
    //     } else {
    //     this.breadCrumbs = Observable.of([
    //       { parentComponentName: 'QuickWizardComponent', label: 'Projects', url: '/projects' },
    //     ]);
    //     this.project = new ProjectEditorWizardModel();
    //     setTimeout(() => {
    //       this.formGroup = this.project.buildForm();
    //     });
    //      }
    //   });
  }


  public isFormValid() {
    return this.formGroup.valid;
  }

  public touchAllFormFields(formControl: AbstractControl) {
    if (formControl instanceof FormControl) {
      formControl.markAsTouched();
    } else if (formControl instanceof FormGroup) {
      Object.keys(formControl.controls).forEach(item => {
        const control = formControl.get(item);
        this.touchAllFormFields(control);
      });
    } else if (formControl instanceof FormArray) {
      formControl.controls.forEach(item => {
        this.touchAllFormFields(item);
      });
    }
  }

  onCallbackSuccess(): void {
    this.uiNotificationService.snackBarNotification(this.isNew ? this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-CREATION') : this.language.instant('GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE'), SnackBarNotificationLevel.Success);
    this.router.navigate(['/project']);
  }

  onCallbackError(errorResponse: any) {
    this.setErrorModel(errorResponse.error.payload);
    this.validateAllFormFields(this.formGroup);
  }

  public setErrorModel(validationErrorModel: ValidationErrorModel) {
    Object.keys(validationErrorModel).forEach(item => {
      (<any>this.project.validationErrorModel)[item] = (<any>validationErrorModel)[item];
    });
  }

  public validateAllFormFields(formControl: AbstractControl) {
    if (formControl instanceof FormControl) {
      formControl.updateValueAndValidity({ emitEvent: false });
    } else if (formControl instanceof FormGroup) {
      Object.keys(formControl.controls).forEach(item => {
        const control = formControl.get(item);
        this.validateAllFormFields(control);
      });
    } else if (formControl instanceof FormArray) {
      formControl.controls.forEach(item => {
        this.validateAllFormFields(item);
      });
    }
  }


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

  create() {
    this.isNew = !this.isNew;
    if (this.isNew) {
      this.formGroup.get('existProject').disable();
      this.formGroup.get('existProject').reset();
      this.formGroup.get('label').enable();
      this.formGroup.get('description').enable();
    } else {
      this.formGroup.get('existProject').enable();
      this.formGroup.get('label').disable();
      this.formGroup.get('label').reset();
      this.formGroup.get('description').disable();
      this.formGroup.get('description').reset();
    }
  }

}