import { PfeActionConfig, PfeActionsService } from '@allianz/ngx-pfe';
import { CommonModule } from '@angular/common';
import { Component, DestroyRef, ElementRef, ViewChild, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { AbstractControl, FormControl, FormsModule, ReactiveFormsModule, ValidationErrors, Validators } from '@angular/forms';
import { NxButtonModule } from '@aposin/ng-aquila/button';
import { NxCopytextModule } from '@aposin/ng-aquila/copytext';
import { NxFormfieldModule } from '@aposin/ng-aquila/formfield';
import { NxGridModule } from '@aposin/ng-aquila/grid';
import { NxLinkModule } from '@aposin/ng-aquila/link';
import { NxMessageModule, NxMessageToastService } from '@aposin/ng-aquila/message';

function createActionsValidator(knownActions: string[]) {
  return (control: AbstractControl): ValidationErrors | null => {
    try {
      const parsedJson = JSON.parse(control.value) as PfeActionConfig[];
      if (parsedJson.length === 0) {
        return { noActions: true };
      }
      for (const actionConfig of parsedJson) {
        if (!actionConfig.type) {
          return { missingType: true };
        }
        if (!knownActions.includes(actionConfig.type)) {
          return { invalidAction: actionConfig.type };
        }
      }
      return null;
    } catch (e) {
      return { invalidJson: true };
    }
  };
}

@Component({
  selector: 'pfe-devtools-actions',
  imports: [
    CommonModule,
    NxGridModule,
    NxMessageModule,
    NxLinkModule,
    FormsModule,
    ReactiveFormsModule,
    NxButtonModule,
    NxFormfieldModule,
    NxCopytextModule,
  ],
  templateUrl: './actions.component.html',
  styleUrl: './actions.component.scss',
})
export class DevToolsActionsComponent {
  actionsControl = new FormControl(
    `[
  {
    "type": "REPLACE_ME"
  }
]`,
    { nonNullable: true, validators: [Validators.required], updateOn: 'blur' }
  );
  registeredActions: string[] = [];
  isExecuting = false;

  @ViewChild('executeActionsButton', { static: true, read: ElementRef }) executeActionsButton?: ElementRef<HTMLButtonElement>;

  private pfeActionsService = inject(PfeActionsService);
  private nxMessageService = inject(NxMessageToastService);
  private destroyRef = inject(DestroyRef);

  constructor() {
    this.pfeActionsService.registeredActions$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((actions) => {
      this.registeredActions = actions;
      this.actionsControl.clearValidators();
      this.actionsControl.setValidators([createActionsValidator(this.registeredActions), Validators.required]);
      this.actionsControl.updateValueAndValidity();
    });
  }

  async executeActions() {
    if (!this.actionsControl.valid) {
      this.actionsControl.markAsTouched();

      this.executeActionsButton?.nativeElement.classList.add('shake');
      // remove the class roughly after the animation completes
      setTimeout(() => {
        this.executeActionsButton?.nativeElement.classList.remove('shake');
      }, 1000);

      return;
    }

    this.isExecuting = true;
    try {
      const parsedJSON = JSON.parse(this.actionsControl.value);
      await this.pfeActionsService.executeActions(parsedJSON);
      this.nxMessageService.open('Action(s) successfully executed', { context: 'success' });
    } catch (e) {
      this.nxMessageService.open(
        `Error executing the Action(s). Error: "${(e as Error).message}". Please check the browser console for details.`,
        {
          context: 'info',
        }
      );
      throw e;
    } finally {
      this.isExecuting = false;
    }
  }

  parseActions() {
    if (!this.actionsControl.valid) {
      return;
    }
    const formattedJSON = JSON.stringify(JSON.parse(this.actionsControl.value), null, 2);
    this.actionsControl.setValue(formattedJSON);
  }
}