import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {
  DfFormfieldComponent,
  DfFormfieldModule,
  FORM_CONTAINER_WIDTH,
  InternalDfFormComponent
} from '@allianz/taly-core/dynamic-form';
import { CommonModule } from '@angular/common';
import {
  afterNextRender,
  ChangeDetectionStrategy,
  Component,
  DestroyRef,
  effect,
  ElementRef,
  inject,
  input,
  output,
  signal,
  Type,
  viewChildren
} from '@angular/core';
import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop';

@Component({
  selector: 'taly-dynamic-form-preview',
  templateUrl: './dynamic-form-preview.component.html',
  styleUrls: ['./dynamic-form-preview.component.scss'],
  imports: [CommonModule, FormsModule, ReactiveFormsModule, DfFormfieldModule, DragDropModule],
  host: {
    '[class.is-retail]': 'isRetailChannel'
  },
  providers: [
    {
      provide: FORM_CONTAINER_WIDTH,
      useFactory: (component: DynamicFormPreviewComponent) => component.containerWidth,
      deps: [DynamicFormPreviewComponent]
    }
  ],
  // This component extends DfFormComponent which can render user-owned form fields.
  // It must use Eager change detection so that those components are checked properly.
  // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
  changeDetection: ChangeDetectionStrategy.Eager
})
export class DynamicFormPreviewComponent extends InternalDfFormComponent {
  canEdit = input<boolean>(false);
  highlightedPosition = input<number | undefined>(undefined);
  formfieldMoved = output<{ previousIndex: number; currentIndex: number }>();
  formfieldAdded = output<{ index: number; formfieldType: string }>();
  formFields = viewChildren(DfFormfieldComponent, { read: ElementRef });
  readonly containerWidth = signal(Infinity);
  private elementRef = inject(ElementRef);
  private destroyRef = inject(DestroyRef);
  private currentHighlightedPosition: number | undefined;

  constructor() {
    super();
    effect(() => {
      const newPosition = this.highlightedPosition();
      const renderingFinished = !this.renderingInProgress();
      this.scrollToHighlighted(newPosition, renderingFinished);
    });

    afterNextRender(() => this.observeContainerWidth());
  }

  itemDropped(event: CdkDragDrop<Type<DfFormfieldComponent>>) {
    if (event.container === event.previousContainer) {
      // Formfield is rearranged
      const { currentIndex, previousIndex } = event;
      if (currentIndex !== previousIndex) {
        this.formfieldMoved.emit({ previousIndex, currentIndex });
      }
    } else if (event.item.data) {
      // Formfield is added from outside
      this.formfieldAdded.emit({
        index: event.currentIndex,
        formfieldType: event.item.data.identifier
      });
    }
  }

  private observeContainerWidth(): void {
    const hostElement = this.elementRef.nativeElement as HTMLElement;

    const resizeObserver = new ResizeObserver((entries) => {
      this.containerWidth.set(entries[0].contentRect.width);
    });
    resizeObserver.observe(hostElement);
    this.destroyRef.onDestroy(() => resizeObserver.disconnect());
  }

  private scrollToHighlighted(index?: number, renderingFinished?: boolean) {
    if (index === undefined || !this.formFields()?.length) {
      return;
    }
    if (index !== this.currentHighlightedPosition) {
      // Smooth scroll when new formfield is highlighted
      this.formFields()[index].nativeElement.scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      });
      this.currentHighlightedPosition = index;
    } else if (renderingFinished) {
      // Instant scroll while editing the same formfield
      this.formFields()[index].nativeElement.scrollIntoView({
        behavior: 'instant',
        block: 'center'
      });
    }
  }
}