import {
  AfterViewInit,
  Directive,
  Inject,
  OnDestroy,
  TemplateRef,
  ViewContainerRef,
} from '@angular/core';
import { Subscription } from 'rxjs';
import {
  distinctUntilChanged,
  tap,
} from 'rxjs/operators';
import { FormDirective } from './form.directive';

@Directive({
  selector: '[rxapFormLoaded]',
  standalone: true,
})
export class FormLoadedDirective implements AfterViewInit, OnDestroy {

  private subscription?: Subscription;

  constructor(
    @Inject(FormDirective) private readonly formDirective: FormDirective,
    @Inject(TemplateRef) private readonly template: TemplateRef<void>,
    @Inject(ViewContainerRef) private readonly viewContainerRef: ViewContainerRef,
  ) {
  }

  public ngAfterViewInit() {
    this.subscription = this.formDirective.loaded$.pipe(
      distinctUntilChanged(),
      tap(loading => {
        this.viewContainerRef.clear();
        if (loading) {
          this.viewContainerRef.createEmbeddedView(this.template);
        }
      }),
    ).subscribe();
  }

  public ngOnDestroy() {
    this.subscription?.unsubscribe();
  }

}