import {Directive, ElementRef, HostBinding} from '@angular/core';
import {Utils} from '../../utils/utils.util';

@Directive({
  selector: 'input[njFormField], textarea[njFormField], select[njFormField], nj-select[njFormField], div[njFormField]',
  exportAs: 'njFormField',
  standalone: true
})
export class FormFieldDirective {
  @HostBinding('class') class = 'nj-form-item__field';

  constructor(private el: ElementRef) {
    this.setPlaceholder();
  }

  private setPlaceholder() {
    if (this.tagName.toLowerCase() === 'select') {
      return;
    }
    const placeholder = this.el?.nativeElement?.placeholder;
    this.el.nativeElement.placeholder = Utils.isUndefinedOrNull(placeholder) || placeholder?.trim() === ''
      ? ' '
      : placeholder;
  }

  get type() {
    return this.el?.nativeElement?.type;
  }

  set type(value: string) {
    if (this.el?.nativeElement) {
      this.el.nativeElement.type = value;
    }
  }

  get tagName() {
    return this.el?.nativeElement?.tagName;
  }

  get element() {
    return this.el?.nativeElement;
  }
}