import {Input, Directive, ElementRef, OnChanges, OnInit, OnDestroy, inject} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';

/**
 * A wrapper directive on top of the translate pipe as the inbuilt translate directive from ngx-translate is too verbose and buggy
 */
@Directive({
  selector: '[jhiTranslate]',
})
export class TranslateDirective implements OnInit, OnChanges, OnDestroy {
  @Input()
  jhiTranslate: string;

  @Input()
  translateValues?: { [key: string]: unknown }; 

  private readonly destroy$ = new Subject<void>();
  private readonly translateService = inject(TranslateService);

  constructor(private readonly el: ElementRef) {
  }

  ngOnInit(): void {
    this.handleLangChange();
  }

  ngOnChanges(): void {
    this.translate();
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  handleLangChange(): void {
    this.translateService.onLangChange
      .pipe(
        takeUntil(this.destroy$)
      )
      .subscribe(() => this.translate());
  }

  private translate(): void {
    this.translateService.get(this.jhiTranslate, this.translateValues)
      .pipe(
        takeUntil(this.destroy$)
      )
      .subscribe(translatedText => this.el.nativeElement.innerHTML = translatedText);
  }
}