Calendar/src/renderers/AllDayEventRenderer.ts

import { CalendarEvent } from '../types/CalendarTypes';
import { SwpAllDayEventElement } from '../elements/SwpEventElement';
import { EventLayout } from '../utils/AllDayLayoutEngine';
import { ColumnBounds } from '../utils/ColumnDetectionUtils';
import { EventManager } from '../managers/EventManager';
import { DragStartEventPayload } from '../types/EventTypes';
import { EventRendererStrategy } from './EventRenderer';

export class AllDayEventRenderer {

  private container: HTMLElement | null = null;
  private originalEvent: HTMLElement | null = null;
  private draggedClone: HTMLElement | null = null;

  constructor() {
    this.getContainer();
  }


  private getContainer(): HTMLElement | null {

    const header = document.querySelector('swp-calendar-header');
    if (header) {
      this.container = header.querySelector('swp-allday-container');

      if (!this.container) {
        this.container = document.createElement('swp-allday-container');
        header.appendChild(this.container);
      }
    }
    return this.container;
  }


  private getAllDayContainer(): HTMLElement | null {
    return document.querySelector('swp-calendar-header swp-allday-container');
  }
  /**
   * Handle drag start for all-day events
   */
  public handleDragStart(payload: DragStartEventPayload): void {

    this.originalEvent = payload.draggedElement;;
    this.draggedClone = payload.draggedClone;

    if (this.draggedClone) {

      const container = this.getAllDayContainer();
      if (!container) return;

      this.draggedClone.style.gridColumn = this.originalEvent.style.gridColumn;
      this.draggedClone.style.gridRow = this.originalEvent.style.gridRow;
      console.log('handleDragStart:this.draggedClone', this.draggedClone);
      container.appendChild(this.draggedClone);

      // Add dragging style
      this.draggedClone.classList.add('dragging');
      this.draggedClone.style.zIndex = '1000';
      this.draggedClone.style.cursor = 'grabbing';

      // Make original semi-transparent
      this.originalEvent.style.opacity = '0.3';
      this.originalEvent.style.userSelect = 'none';
    }
  }



  /**
   * Render an all-day event with pre-calculated layout
   */
  private renderAllDayEventWithLayout(
    event: CalendarEvent,
    layout: EventLayout
  ) {
    const container = this.getContainer();
    if (!container) return null;

    const dayEvent = SwpAllDayEventElement.fromCalendarEvent(event);
    dayEvent.applyGridPositioning(layout.row, layout.startColumn, layout.endColumn);

    // Apply highlight class to show events with highlight color
    dayEvent.classList.add('highlight');

    container.appendChild(dayEvent);
  }


  /**
   * Remove an all-day event by ID
   */
  public removeAllDayEvent(eventId: string): void {
    const container = this.getContainer();
    if (!container) return;

    const eventElement = container.querySelector(`swp-event[data-event-id="${eventId}"]`);
    if (eventElement) {
      eventElement.remove();
    }
  }

  /**
   * Clear cache when DOM changes
   */
  public clearCache(): void {
    this.container = null;
  }

  /**
    * Render all-day events for specific period using AllDayEventRenderer
    */
  public renderAllDayEventsForPeriod(eventLayouts: EventLayout[]): void {
    this.clearAllDayEvents();

    eventLayouts.forEach(layout => {
      this.renderAllDayEventWithLayout(layout.calenderEvent, layout);
    });

  }

  private clearAllDayEvents(): void {
    const allDayContainer = document.querySelector('swp-allday-container');
    if (allDayContainer) {
      allDayContainer.querySelectorAll('swp-event').forEach(event => event.remove());
    }
  }

  public handleViewChanged(event: CustomEvent): void {
    this.clearAllDayEvents();
  }
}