import {
  Directive,
  ElementRef,
  Output,
  EventEmitter,
  HostListener,
  inject,
} from "@angular/core";

@Directive({
  selector: "[sam-focus]",
  standalone: false,
})
export class SamFocusDirective {
  private _elementRef = inject(ElementRef);

  /**
   * Event emitter for focus event
   */
  @Output() focus = new EventEmitter();

  @HostListener("document:click", ["$event.target"])
  public onClick(targetElement) {
    const clickedInside =
      this._elementRef.nativeElement.contains(targetElement);
    if (clickedInside) {
      this.focus.emit(undefined);
    }
  }

  @HostListener("document:keyup", ["$event.target"])
  public hasFocusChanged(target) {
    const isInsideHost = this._elementRef.nativeElement.contains(target);
    if (isInsideHost) {
      this.focus.emit(undefined);
    }
  }
}