import { Directive, effect, input, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { UntypedFormControl } from '@angular/forms';

@Directive({
  selector: '[dfUpperCase]',
  standalone: false
})
export class DfUppercaseDirective implements OnDestroy {
  private componentDestroyed$ = new Subject<void>();
  upperCaseControl = input<UntypedFormControl | undefined>(undefined);

  constructor() {
    effect(() => {
      const control = this.upperCaseControl();
      this.handleControlValue(control);
    });
  }

  ngOnDestroy(): void {
    this.componentDestroyed$.next();
    this.componentDestroyed$.unsubscribe();
  }

  private handleControlValue(control: UntypedFormControl | undefined): void {
    if (!control) {
      return;
    }

    control.valueChanges
      .pipe(
        filter((value) => typeof value === 'string'),
        filter((value) => !!value),
        takeUntil(this.componentDestroyed$)
      )
      .subscribe((value) => {
        control.setValue((value as string).toUpperCase(), { emitEvent: false });
      });
  }
}