Calendar/src/managers/EdgeScrollManager.ts

/**
 * EdgeScrollManager - Auto-scroll when dragging near edges
 * Uses time-based scrolling with 2-zone system for variable speed
 */

import { IEventBus } from '../types/CalendarTypes';
import { IDragMoveEventPayload, IDragStartEventPayload } from '../types/EventTypes';

export class EdgeScrollManager {
  private scrollableContent: HTMLElement | null = null;
  private timeGrid: HTMLElement | null = null;
  private draggedClone: HTMLElement | null = null;
  private scrollRAF: number | null = null;
  private mouseY = 0;
  private isDragging = false;
  private isScrolling = false; // Track if edge-scroll is active
  private lastTs = 0;
  private rect: DOMRect | null = null;
  private initialScrollTop = 0;
  private scrollListener: ((e: Event) => void) | null = null;

  // Constants - fixed values as per requirements
  private readonly OUTER_ZONE = 100;        // px from edge (slow zone)
  private readonly INNER_ZONE = 50;         // px from edge (fast zone)
  private readonly SLOW_SPEED_PXS = 140;    // px/sec in outer zone
  private readonly FAST_SPEED_PXS = 640;   // px/sec in inner zone

  constructor(private eventBus: IEventBus) {
    this.init();
  }

  private init(): void {
    // Wait for DOM to be ready
    setTimeout(() => {
      this.scrollableContent = document.querySelector('swp-scrollable-content');
      this.timeGrid = document.querySelector('swp-time-grid');
      
      if (this.scrollableContent) {
        // Disable smooth scroll for instant auto-scroll
        this.scrollableContent.style.scrollBehavior = 'auto';
        
        // Add scroll listener to detect actual scrolling
        this.scrollListener = this.handleScroll.bind(this);
        this.scrollableContent.addEventListener('scroll', this.scrollListener, { passive: true });
      }
    }, 100);

    // Listen to mousemove directly from document to always get mouse coords
    document.body.addEventListener('mousemove', (e: MouseEvent) => {
      if (this.isDragging) {
        this.mouseY = e.clientY;
      }
    });

    this.subscribeToEvents();
  }

  private subscribeToEvents(): void {

    // Listen to drag events from DragDropManager
    this.eventBus.on('drag:start', (event: Event) => {
      const payload = (event as CustomEvent).detail;
      this.draggedClone = payload.draggedClone;
      this.startDrag();
    });

    this.eventBus.on('drag:end', () => this.stopDrag());
    this.eventBus.on('drag:cancelled', () => this.stopDrag());
    
    // Stop scrolling when event converts to/from all-day
    this.eventBus.on('drag:mouseenter-header', () => {
      console.log('🔄 EdgeScrollManager: Event converting to all-day - stopping scroll');
      this.stopDrag();
    });
    
    this.eventBus.on('drag:mouseenter-column', () => {
      this.startDrag();
    });
  }

  private startDrag(): void {
    console.log('🎬 EdgeScrollManager: Starting drag');
    this.isDragging = true;
    this.isScrolling = false; // Reset scroll state
    this.lastTs = performance.now();

    // Save initial scroll position
    if (this.scrollableContent) {
      this.initialScrollTop = this.scrollableContent.scrollTop;
    }

    if (this.scrollRAF === null) {
      this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts));
    }
  }

  private stopDrag(): void {
    this.isDragging = false;
    
    // Emit stopped event if we were scrolling
    if (this.isScrolling) {
      this.isScrolling = false;
      console.log('🛑 EdgeScrollManager: Edge-scroll stopped (drag ended)');
      this.eventBus.emit('edgescroll:stopped', {});
    }
    
    if (this.scrollRAF !== null) {
      cancelAnimationFrame(this.scrollRAF);
      this.scrollRAF = null;
    }
    this.rect = null;
    this.lastTs = 0;
    this.initialScrollTop = 0;
  }

  private handleScroll(): void {
    if (!this.isDragging || !this.scrollableContent) return;

    const currentScrollTop = this.scrollableContent.scrollTop;
    const scrollDelta = Math.abs(currentScrollTop - this.initialScrollTop);

    // Only emit started event if we've actually scrolled more than 1px
    if (scrollDelta > 1 && !this.isScrolling) {
      this.isScrolling = true;
      console.log('💾 EdgeScrollManager: Edge-scroll started (actual scroll detected)', {
        initialScrollTop: this.initialScrollTop,
        currentScrollTop,
        scrollDelta
      });
      this.eventBus.emit('edgescroll:started', {});
    }
  }

  private scrollTick(ts: number): void {
    const dt = this.lastTs ? (ts - this.lastTs) / 1000 : 0;
    this.lastTs = ts;

    if (!this.scrollableContent) {
      this.stopDrag();
      return;
    }

    // Cache rect for performance (only measure once per frame)
    if (!this.rect) {
      this.rect = this.scrollableContent.getBoundingClientRect();
    }

    let vy = 0;
    if (this.isDragging) {
      const distTop = this.mouseY - this.rect.top;
      const distBot = this.rect.bottom - this.mouseY;

      // Check top edge
      if (distTop < this.INNER_ZONE) {
        vy = -this.FAST_SPEED_PXS;
      } else if (distTop < this.OUTER_ZONE) {
        vy = -this.SLOW_SPEED_PXS;
      }
      // Check bottom edge
      else if (distBot < this.INNER_ZONE) {
        vy = this.FAST_SPEED_PXS;
      } else if (distBot < this.OUTER_ZONE) {
        vy = this.SLOW_SPEED_PXS;
      }
    }

    if (vy !== 0 && this.isDragging && this.timeGrid && this.draggedClone) {
      // Check if we can scroll in the requested direction
      const currentScrollTop = this.scrollableContent.scrollTop;
      const scrollableHeight = this.scrollableContent.clientHeight;
      const timeGridHeight = this.timeGrid.clientHeight;
      
      // Get dragged element position and height
      const cloneRect = this.draggedClone.getBoundingClientRect();
      const cloneBottom = cloneRect.bottom;
      const timeGridRect = this.timeGrid.getBoundingClientRect();
      const timeGridBottom = timeGridRect.bottom;
      
      // Check boundaries
      const atTop = currentScrollTop <= 0 && vy < 0;
      const atBottom = (cloneBottom >= timeGridBottom) && vy > 0;
      
      
      if (atTop || atBottom) {
        // At boundary - stop scrolling
        if (this.isScrolling) {
          this.isScrolling = false;
          this.initialScrollTop = this.scrollableContent.scrollTop;
          console.log('🛑 EdgeScrollManager: Edge-scroll stopped (reached boundary)');
          this.eventBus.emit('edgescroll:stopped', {});
        }
        
        // Continue RAF loop to detect when mouse moves away from boundary
        if (this.isDragging) {
          this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts));
        }
      } else {
        // Not at boundary - apply scroll
        this.scrollableContent.scrollTop += vy * dt;
        this.rect = null; // Invalidate cache for next frame
        this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts));
      }
    } else {
      // Mouse moved away from edge - stop scrolling
      if (this.isScrolling) {
        this.isScrolling = false;
        this.initialScrollTop = this.scrollableContent.scrollTop; // Reset for next scroll
        console.log('🛑 EdgeScrollManager: Edge-scroll stopped (mouse left edge)');
        this.eventBus.emit('edgescroll:stopped', {});
      }
      
      // Continue RAF loop even if not scrolling, to detect edge entry
      if (this.isDragging) {
        this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts));
      } else {
        this.stopDrag();
      }
    }
  }
}