import {
  Directive,
  ElementRef,
  Output,
  EventEmitter,
  OnDestroy,
  Renderer2,
  Input,
  OnChanges,
  SimpleChanges,
  inject,
} from '@angular/core';
/**
 * Directive that emits an event when a click occurs outside of the bound element.
 *
 * @example
 * <!-- Add the clickOutside directive to an element and listen for the clickOutside event. -->
 * <div [clickOutside]="true" (clickOutside)="handleClickOutside()">
 *   <!-- Content here -->
 * </div>
 */
@Directive({
  selector: '[clickOutside]',
  standalone: true,
})
export class SqClickOutsideDirective implements OnDestroy, OnChanges {
  /**
   * Indicates whether the clickOutside functionality is enabled.
   */
  @Input() clickOutsideEnabled = false;

  /**
   * Event emitted when a click occurs outside of the bound element.
   */
  @Output() public clickOutside = new EventEmitter();

  /**
   * Listener function to handle click events.
   */
  listener!: () => void;

  /**
   * The ElementRef of the bound element.
   */
  private elementRef = inject(ElementRef);

  /**
   * The Renderer2 for DOM manipulation.
   */
  private renderer = inject(Renderer2);

  /**
   * Lifecycle hook that handles changes to the clickOutsideEnabled property.
   *
   * @param {SimpleChanges} changes - The changes to input properties.
   */
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['clickOutsideEnabled']) {
      if (changes['clickOutsideEnabled'].currentValue) {
        this.createListener();
      } else if (typeof this.listener === 'function') {
        this.listener();
      }
    }
  }

  /**
   * Lifecycle hook that cleans up the directive when it is destroyed.
   */
  ngOnDestroy() {
    this.listener = () => null;
  }

  /**
   * Creates a click event listener to detect clicks outside of the bound element.
   * Uses a small delay to prevent the opening click from being detected.
   */
  createListener() {
    // Delay to prevent the click that opened the modal from being detected
    setTimeout(() => {
    this.listener = this.renderer.listen('window', 'click', $event => {
      const isClickedInside = this.elementRef.nativeElement.contains($event.target);
      if (!isClickedInside) {
        this.clickOutside.emit();
      }
    });
    }, 100);
  }
}