import {
  Directive,
  ElementRef,
  Input,
  Renderer2,
  HostListener,
} from "@angular/core";

@Directive({
  selector: "[Placeholder]",
  standalone: true,
})
export class PlaceholderDirective {
  @Input() placeholder: string = "";

  constructor(
    private el: ElementRef,
    private renderer: Renderer2
  ) {}

  ngOnInit() {
    this.updatePlaceholder();
  }

  @HostListener("input") onInput() {
    this.updatePlaceholder();
  }

  @HostListener("focus") onFocus() {
    this.updatePlaceholder(true);
  }

  @HostListener("keydown", ["$event"]) onKeyDown(event: KeyboardEvent) {
    this.updatePlaceholder(true);
  }

  private updatePlaceholder(focus: boolean = false): void {
    const element = this.el.nativeElement;
    if (!element.innerText.trim() && !focus) {
      this.renderer.setProperty(element, "innerText", this.placeholder);
      this.renderer.setStyle(element, "color", "#DADADA");
    } else if (element.innerText === this.placeholder && focus) {
      this.renderer.setProperty(element, "innerText", "");
      this.renderer.setStyle(element, "color", "#DADADA");
    } else if (element.innerText === this.placeholder) {
      this.renderer.setStyle(element, "color", "#DADADA");
    } else {
      this.renderer.setStyle(element, "color", "#DADADA");
    }
  }
}