import { Directive, HostListener, Input, inject } from '@angular/core';
import { OpenPanelService, TrackProperties } from '@core/services/openpanel.service';

/**
 * Directive for declarative event tracking directly in templates.
 *
 * @example
 * <button opTrack="signup_clicked" [opTrackProps]="{ location: 'hero' }">
 *   Sign Up
 * </button>
 *
 * @example
 * <a routerLink="/pricing" opTrack="pricing_link_clicked">Pricing</a>
 */
@Directive({
  selector: '[opTrack]',
  standalone: true,
})
export class OpenPanelTrackDirective {
  private readonly op = inject(OpenPanelService);

  /** The event name to track on click. */
  @Input({ required: true }) opTrack!: string;

  /** Optional properties to send with the event. */
  @Input() opTrackProps?: TrackProperties;

  /** Which DOM event triggers tracking. Default: 'click' */
  @Input() opTrackOn: 'click' | 'mouseenter' | 'focus' | 'blur' = 'click';

  @HostListener('click')
  onClick(): void {
    if (this.opTrackOn === 'click') {
      this.op.track(this.opTrack, this.opTrackProps);
    }
  }

  @HostListener('mouseenter')
  onMouseEnter(): void {
    if (this.opTrackOn === 'mouseenter') {
      this.op.track(this.opTrack, this.opTrackProps);
    }
  }

  @HostListener('focus')
  onFocus(): void {
    if (this.opTrackOn === 'focus') {
      this.op.track(this.opTrack, this.opTrackProps);
    }
  }

  @HostListener('blur')
  onBlur(): void {
    if (this.opTrackOn === 'blur') {
      this.op.track(this.opTrack, this.opTrackProps);
    }
  }
}