import { Component, ElementRef, Inject } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { DOCUMENT } from "@angular/common"
import { BaseComponent, UtilityService, LoggerService, TranslationService, AppConfigService } from '@researchdatabox/portal-ng-common';
import { FormlyFieldConfig } from '@ngx-formly/core';
import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
import { JSONSchema7 } from 'json-schema';
import { AppConfig } from 'projects/researchdatabox/portal-ng-common/src/public-api';
import { clone as _clone } from 'lodash'
/**
 * Application Config  Component
 *
 */
@Component({
  selector: 'app-config',
  templateUrl: './app-config.component.html'
})
export class AppConfigComponent extends BaseComponent {

  window: any;
  form = new FormGroup({});
  model = {};
  fields: FormlyFieldConfig[] = [
   
  ];
  configKey: any;
  formSaving: boolean = false;
  formSaveSuccessful: boolean = false;
  formSaveUnsuccessful: boolean = false;


  constructor(
    @Inject(LoggerService) private loggerService: LoggerService,
    @Inject(UtilityService) protected utilService: UtilityService,
    @Inject(FormBuilder) private fb: FormBuilder,
    @Inject(DOCUMENT) private document: Document,
    @Inject(TranslationService) private translationService: TranslationService,
    @Inject(AppConfigService) private appConfigService: AppConfigService,
    private formlyJsonschema: FormlyJsonschema,
    @Inject(ElementRef) elementRef: ElementRef
  ) {
    super();
    this.loggerService.debug(`AppConfig waiting for deps to init...`);
    this.window = this.document.defaultView;
    // set this component's dependencies
    this.configKey = elementRef.nativeElement.getAttribute('configKey');
    this.initDependencies = [translationService, appConfigService];
  }

  protected override async initComponent(): Promise<void> {
    let result: AppConfig = await this.appConfigService.getAppConfigForm(this.configKey)
    const jsonObject: JSONSchema7 = result.schema as JSONSchema7;
    const fieldOrder = result.fieldOrder;
    let originalProperties = _clone(jsonObject.properties);
    jsonObject.properties = {};
    for (let field of fieldOrder) {
      if (originalProperties) {
        jsonObject.properties[field] = originalProperties[field];
      }
    }

    this.fields = [this.formlyJsonschema.toFieldConfig(jsonObject)]
    this.model = result.model;
    this.loggerService.debug(`AppConfig initialised.`);
  }


  onSubmit(model: any) {
    this.formSaving = true;
    this.formSaveUnsuccessful = false;
    this.formSaveSuccessful = false;
    this.appConfigService.saveAppConfig(this.configKey, model).then((result: AppConfig) => {
      this.formSaveSuccessful = true;
      setTimeout(() => {
        this.formSaveSuccessful = false;
      }, 3000);
      this.formSaving = false;
    }).catch((error: any) => {
      this.formSaveSuccessful = false;
      this.formSaveUnsuccessful = true;
      this.formSaving = false;
    });
  }
}