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';
/**
 * AllDayEventRenderer - Simple rendering of all-day events
 * Handles adding and removing all-day events from the header container
 * NOTE: Layout calculation is now handled by AllDayManager
 */
export class AllDayEventRenderer {
  private container: HTMLElement | null = null;

  constructor() {
    this.getContainer();
  }

  /**
   * Get or cache all-day container, create if it doesn't exist - SIMPLIFIED (no ghost columns)
   */
  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;

  }

  // REMOVED: createGhostColumns() method - no longer needed!

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

    let dayEvent = new SwpAllDayEventElement(event);
    dayEvent.applyGridPositioning(layout);

    container.appendChild(dayEvent.getElement());
  }


  /**
   * 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 {
    // Get events from EventManager for the period
    // const events = this.eventManager.getEventsForPeriod(startDate, endDate);



    // Clear existing all-day events first
    this.clearAllDayEvents();

    // Get actual visible dates from DOM headers instead of generating them

    // const layouts = this.allDayManager.initAllDayEventsLayout(allDayEvents, weekDates);

    // Render each all-day event with pre-calculated layout
    eventLayouts.forEach(layout => {
      this.renderAllDayEventWithLayout(layout.calenderEvent, layout);
    });


  }
  /**
     * Clear only all-day events
     */
  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();
  }
}