import { NxButtonComponent } from '@allianz/ng-aquila/button';
import { NxCheckboxComponent } from '@allianz/ng-aquila/checkbox';
import { NxDropdownComponent, NxDropdownItemComponent } from '@allianz/ng-aquila/dropdown';
import { NxFormfieldComponent } from '@allianz/ng-aquila/formfield';
import { NxColComponent, NxLayoutComponent, NxRowComponent } from '@allianz/ng-aquila/grid';
import { NxLinkComponent } from '@allianz/ng-aquila/link';
import { PfeBusinessService } from '@allianz/ngx-pfe';
import {
  formFieldConfigurations,
  fullExampleConfig
} from '@allianz/taly-core/devtools/dynamic-form-editor';
import { DfFormLayoutType } from '@allianz/taly-core/dynamic-form';
import { TalyInternalHeadlineComponent } from '@allianz/taly-core/ui';
import { DebugToolsService } from '@allianz/taly-core/devtools';
import { DfBasicComponentsConfig, DynamicFormConfiguration } from '@allianz/taly-core/schemas';
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  DestroyRef,
  inject,
  input,
  output
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormsModule } from '@angular/forms';
import { MonacoEditorModule, NgxEditorModel } from '@allianz/taly-core/monaco-editor';
import { debounceTime, filter, Subject } from 'rxjs';

@Component({
  selector: 'bc-dynamic-form-config-editor',
  imports: [
    NxColComponent,
    NxRowComponent,
    NxButtonComponent,
    NxLayoutComponent,
    MonacoEditorModule,
    FormsModule,
    NxDropdownItemComponent,
    NxDropdownComponent,
    NxFormfieldComponent,
    NxCheckboxComponent,
    TalyInternalHeadlineComponent,
    NxLinkComponent
  ],
  standalone: true,
  templateUrl: './dynamic-form-config-editor.component.html',
  styleUrl: './dynamic-form-config-editor.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DynamicFormConfigEditorComponent {
  protected DF_LAYOUT_TYPES: string[] = Object.values(DfFormLayoutType) as DfFormLayoutType[];

  formConfig = input<DynamicFormConfiguration>();
  isExpertChannel = input<boolean>();
  formConfigChange = output<DynamicFormConfiguration>();

  protected monacoModel!: NgxEditorModel;
  protected monacoFormConfigText: string | undefined;
  protected layoutType: DfFormLayoutType = DfFormLayoutType.OneColumn;
  protected headlineWidthMatchesLayoutType?: boolean;
  protected paragraphWidthMatchesLayoutType?: boolean;
  protected fullWidthFormInExpert?: boolean;
  protected editorOptions = {
    theme: 'vs-dark',
    language: 'json',
    fontSize: 15
  };
  protected debugToolsVisible = inject(DebugToolsService).debugToolsVisible;
  protected formFields: DfBasicComponentsConfig[] = Object.values(formFieldConfigurations).filter(
    (fieldConfig) => fieldConfig !== null
  );

  private cdr = inject(ChangeDetectorRef);
  private destroyRef = inject(DestroyRef);
  private pfeBusinessService = inject(PfeBusinessService);
  private debugToolsService = inject(DebugToolsService);
  private monacoUpdatedConfig$ = new Subject<DynamicFormConfiguration | undefined>();
  private monacoInitialized = false;

  constructor() {
    this.updateFormConfigLink(this.formConfig());
  }

  protected onMonacoInit() {
    if (this.monacoInitialized) {
      return;
    }

    this.monacoUpdatedConfig$
      .pipe(
        debounceTime(200),
        filter((data): data is NonNullable<typeof data> => data !== undefined),
        takeUntilDestroyed(this.destroyRef)
      )
      .subscribe((data) => {
        this.updateFormConfig(data);
      });

    this.cdr.markForCheck();
    this.monacoInitialized = true;

    this.layoutType = this.formConfig()?.layout?.type || DfFormLayoutType.OneColumn;
    this.headlineWidthMatchesLayoutType = this.formConfig()?.layout?.headlineWidthMatchesLayoutType;
    this.paragraphWidthMatchesLayoutType =
      this.formConfig()?.layout?.paragraphWidthMatchesLayoutType;
    this.fullWidthFormInExpert = this.formConfig()?.layout?.fullWidthFormInExpert;

    this.updateFormConfigLink(this.formConfig());
    this.updateMonacoContent(this.formConfig());
  }

  protected monacoChange($event: string) {
    // edge case if the user clears the editor or adds an empty object
    const monacoConfigWithoutWhitespace = $event.replace(/\s+/g, '');
    if (monacoConfigWithoutWhitespace === '' || monacoConfigWithoutWhitespace === '{}') {
      this.monacoUpdatedConfig$.next({ fields: [], layout: { type: DfFormLayoutType.OneColumn } });
      return;
    }

    try {
      const dynamicFormConfiguration = JSON.parse($event);
      if (!dynamicFormConfiguration.fields) {
        dynamicFormConfiguration.fields = [];
      }
      this.monacoUpdatedConfig$.next(dynamicFormConfiguration);
    } catch (error) {
      console.warn(error);
    }
  }

  protected onLayoutTypeChange(layoutType: DfFormLayoutType) {
    const currentConfig = this.formConfig();
    if (currentConfig) {
      const newConfig = structuredClone(currentConfig);
      newConfig.layout = {
        ...currentConfig.layout,
        type: layoutType
      };

      this.updateFormConfig(newConfig);
      this.updateMonacoContent(newConfig);
    }
  }

  protected onHeadlineWidthMatchesLayoutTypeChange(headlineWidthMatchesLayoutType: boolean) {
    const currentConfig = this.formConfig();
    if (currentConfig) {
      const newConfig = structuredClone(currentConfig);
      newConfig.layout = {
        ...(currentConfig.layout || { type: DfFormLayoutType.OneColumn }),
        headlineWidthMatchesLayoutType
      };

      this.updateFormConfig(newConfig);
      this.updateMonacoContent(newConfig);
    }
  }

  protected onParagraphWidthMatchesLayoutTypeChange(paragraphWidthMatchesLayoutType: boolean) {
    const currentConfig = this.formConfig();
    if (currentConfig) {
      const newConfig = structuredClone(currentConfig);
      newConfig.layout = {
        ...(currentConfig.layout || { type: DfFormLayoutType.OneColumn }),
        paragraphWidthMatchesLayoutType
      };

      this.updateFormConfig(newConfig);
      this.updateMonacoContent(newConfig);
    }
  }

  protected onFullWidthFormInExpertChange(fullWidthFormInExpert: boolean) {
    const currentConfig = this.formConfig();
    if (currentConfig) {
      const newConfig = structuredClone(currentConfig);
      newConfig.layout = {
        ...(currentConfig.layout || { type: DfFormLayoutType.OneColumn }),
        fullWidthFormInExpert
      };

      this.updateFormConfig(newConfig);
      this.updateMonacoContent(newConfig);
    }
  }

  protected addFullExample() {
    const fieldId = this.generateFieldId();
    const fullExampleConfigString = JSON.stringify(fullExampleConfig);
    const fullExampleConfigWithoutIndexPlaceholder = fullExampleConfigString.replace(
      /-{talyFieldId}/g,
      `-${fieldId}`
    );
    const fields: DfBasicComponentsConfig[] = JSON.parse(fullExampleConfigWithoutIndexPlaceholder);
    this.addFields(fields, fieldId);
  }

  protected addFields(addedFields: DfBasicComponentsConfig[], fieldId?: string) {
    if (!fieldId) {
      fieldId = this.generateFieldId();
    }
    const fields: DfBasicComponentsConfig[] = structuredClone(addedFields);

    const currentConfig = this.formConfig();
    if (currentConfig) {
      const newConfig = structuredClone(currentConfig);
      fields.forEach((field) => {
        field.id = field.id + `-${fieldId}`;
        newConfig.fields.push(field);
      });

      this.updateFormConfig(newConfig);
      this.updateMonacoContent(newConfig);
    }
  }

  private updateFormConfig(newFormConfig: DynamicFormConfiguration) {
    this.layoutType = newFormConfig.layout?.type || DfFormLayoutType.OneColumn;
    this.headlineWidthMatchesLayoutType = newFormConfig.layout?.headlineWidthMatchesLayoutType;
    this.paragraphWidthMatchesLayoutType = newFormConfig.layout?.paragraphWidthMatchesLayoutType;
    this.fullWidthFormInExpert = newFormConfig.layout?.fullWidthFormInExpert;

    this.formConfigChange.emit(newFormConfig);
    this.updateFormConfigLink(newFormConfig);

    this.cdr.markForCheck();
  }

  private updateMonacoContent(formConfig?: DynamicFormConfiguration) {
    this.monacoFormConfigText = JSON.stringify(formConfig, null, 2);

    this.monacoModel = {
      value: this.monacoFormConfigText || '',
      language: 'json',
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      uri: (window as any).monaco?.Uri?.parse
        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
          (window as any).monaco.Uri.parse(
            `a://${Math.random().toString(36).substring(7)}/dynamic-form.json`
          )
        : undefined
    };

    this.cdr.markForCheck();
  }

  private updateFormConfigLink(formConfig?: DynamicFormConfiguration) {
    this.debugToolsService.encodedDynamicFormConfig.set(
      encodeURIComponent(JSON.stringify(formConfig || {}))
    );

    if (formConfig) {
      this.pfeBusinessService.storeValueByExpression('$.formConfigFromEditor', formConfig);
    }
  }

  private generateFieldId() {
    return Math.random().toString(36).substring(7);
  }
}