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

@Directive({
  selector: '[appPanGesture]'
})
export class PanGesture {

  private isPanning = false;
  private startX = 0;
  private startY = 0;

  @Output() panStart = new EventEmitter<{ x: number, y: number }>();
  @Output() panMove = new EventEmitter<{ deltaX: number, deltaY: number }>();
  @Output() panEnd = new EventEmitter<void>();

  constructor(private el: ElementRef) {}

  @HostListener('pointerdown', ['$event'])
  onPointerDown(event: PointerEvent) {
    event.preventDefault();
    this.isPanning = true;
    this.startX = event.clientX;
    this.startY = event.clientY;
    this.panStart.emit({ x: this.startX, y: this.startY });
    // this.el.nativeElement.setPointerCapture(event.pointerId);
  }

  @HostListener('pointermove', ['$event'])
  onPointerMove(event: PointerEvent) {
    if (!this.isPanning) return;
    event.preventDefault();
    const deltaX = event.clientX - this.startX;
    const deltaY = event.clientY - this.startY;
    this.panMove.emit({ deltaX, deltaY });
  }

  @HostListener('pointerup', ['$event'])
  onPointerUp(event: PointerEvent) {
    if (!this.isPanning) return;
    event.preventDefault();
    this.isPanning = false;
    this.panEnd.emit();
  }

  // Handle pointer cancellation (e.g., if touch is interrupted)
  @HostListener('pointercancel', ['$event'])
  onPointerCancel(event: PointerEvent) {
    this.isPanning = false;
    this.panEnd.emit();
  }
}