Calendar/src/renderers/AllDayEventRenderer.ts

import { CalendarEvent } from '../types/CalendarTypes';
import { SwpAllDayEventElement } from '../elements/SwpEventElement';

/**
 * AllDayEventRenderer - Simple rendering of all-day events
 * Handles adding and removing all-day events from the header container
 */
export class AllDayEventRenderer {
  private container: HTMLElement | null = null;

  constructor() {
    this.getContainer();
  }

  /**
   * Get or cache all-day container, create if it doesn't exist
   */
  private getContainer(): HTMLElement | null {
    if (!this.container) {
      const header = document.querySelector('swp-calendar-header');
      if (header) {
        // Try to find existing container
        this.container = header.querySelector('swp-allday-container');
        
        // If not found, create it
        if (!this.container) {
          this.container = document.createElement('swp-allday-container');
          header.appendChild(this.container);
          
          // Create ghost columns for mouseenter events
          this.createGhostColumns();
        }
      }
    }
    return this.container;
  }

  /**
   * Create ghost columns for mouseenter events
   */
  private createGhostColumns(): void {
    if (!this.container) return;

    // Get all day headers to create matching ghost columns
    const dayHeaders = document.querySelectorAll('swp-day-header');
    dayHeaders.forEach((header, index) => {
      const ghostColumn = document.createElement('swp-allday-column');
      const headerElement = header as HTMLElement;
      
      // Copy date from corresponding day header
      if (headerElement.dataset.date) {
        ghostColumn.dataset.date = headerElement.dataset.date;
      }
      
      // Set grid column position (1-indexed)
      ghostColumn.style.gridColumn = (index + 1).toString();
      ghostColumn.style.gridRow = '1 / -1'; // Span all rows
      
      this.container!.appendChild(ghostColumn);
    });
  }

  /**
   * Render an all-day event using factory pattern
   */
  public renderAllDayEvent(event: CalendarEvent, targetDate?: string): HTMLElement | null {
    const container = this.getContainer();
    if (!container) return null;

    const allDayElement = SwpAllDayEventElement.fromCalendarEvent(event, targetDate);
    const element = allDayElement.getElement();
    
    container.appendChild(element);
    return element;
  }

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

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

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