Calendar/src/managers/ResizeHandleManager.ts

import { eventBus } from '../core/EventBus';
import { CoreEvents } from '../constants/CoreEvents';

export class ResizeHandleManager {
  private resizeZoneHeight = 15; // Must match CSS ::after height
  private cachedEvents: HTMLElement[] = [];

  public initialize(): void {
    this.refreshEventCache();
    this.setupEventListeners();
  }

  private refreshEventCache(): void {
    this.cachedEvents = Array.from(
      document.querySelectorAll<HTMLElement>('swp-day-columns swp-event')
    );
  }

  private setupEventListeners(): void {
    document.addEventListener('mousemove', (e: MouseEvent) => {
      this.handleGlobalMouseMove(e);
    });

    eventBus.on(CoreEvents.GRID_RENDERED, () => this.refreshEventCache());
    eventBus.on(CoreEvents.EVENTS_RENDERED, () => this.refreshEventCache());
    eventBus.on(CoreEvents.EVENT_CREATED, () => this.refreshEventCache());
    eventBus.on(CoreEvents.EVENT_UPDATED, () => this.refreshEventCache());
    eventBus.on(CoreEvents.EVENT_DELETED, () => this.refreshEventCache());
    eventBus.on('drag:end', () => this.refreshEventCache());
  }

  private handleGlobalMouseMove(e: MouseEvent): void {
    // Check all cached events to see if mouse is in their resize zone
    const events = this.cachedEvents;

    events.forEach(eventElement => {
      const rect = eventElement.getBoundingClientRect();
      const mouseY = e.clientY;
      const mouseX = e.clientX;

      // Check if mouse is within element bounds horizontally
      const isInHorizontalBounds = mouseX >= rect.left && mouseX <= rect.right;

      // Check if mouse is in bottom resize zone of the element
      const distanceFromBottom = rect.bottom - mouseY;
      const isInResizeZone = distanceFromBottom >= 0 && distanceFromBottom <= this.resizeZoneHeight;

      if (isInHorizontalBounds && isInResizeZone) {
        this.showResizeIndicator(eventElement);
        console.log(`✅ In resize zone - bottom ${this.resizeZoneHeight}px`);
      } else {
        this.hideResizeIndicator(eventElement);
      }
    });
  }

  private showResizeIndicator(eventElement: HTMLElement): void {
    // Check if indicator already exists
    let indicator = eventElement.querySelector<HTMLElement>('swp-resize-indicator');

    if (!indicator) {
      indicator = document.createElement('swp-resize-indicator');
      eventElement.appendChild(indicator);
    }

    eventElement.setAttribute('data-resize-hover', 'true');
  }

  private hideResizeIndicator(eventElement: HTMLElement): void {
    const indicator = eventElement.querySelector<HTMLElement>('swp-resize-indicator');
    if (indicator) {
      indicator.remove();
    }
    eventElement.removeAttribute('data-resize-hover');
  }
}