import { IEventBus } from '../types/CalendarTypes';
import { EventTypes } from '../constants/EventTypes';
import { DateUtils } from '../utils/DateUtils';

/**
 * NavigationRenderer - Handles DOM rendering for navigation containers
 * Separated from NavigationManager to follow Single Responsibility Principle
 */
export class NavigationRenderer {
  private eventBus: IEventBus;

  constructor(eventBus: IEventBus) {
    this.eventBus = eventBus;
  }

  /**
   * Render a complete container with content and events
   */
  public renderContainer(parentContainer: HTMLElement, weekStart: Date): HTMLElement {
    console.log('NavigationRenderer: Rendering new container for week:', weekStart.toDateString());
    
    // Create new grid container
    const newGrid = document.createElement('swp-grid-container');
    newGrid.innerHTML = `
      <swp-calendar-header></swp-calendar-header>
      <swp-scrollable-content>
        <swp-time-grid>
          <swp-grid-lines></swp-grid-lines>
          <swp-day-columns></swp-day-columns>
        </swp-time-grid>
      </swp-scrollable-content>
    `;

    // Position new grid - NO transform here, let Animation API handle it
    newGrid.style.position = 'absolute';
    newGrid.style.top = '0';
    newGrid.style.left = '0';
    newGrid.style.width = '100%';
    newGrid.style.height = '100%';

    // Add to parent container
    parentContainer.appendChild(newGrid);

    // Render week content (headers and columns)
    this.renderWeekContentInContainer(newGrid, weekStart);
    
    // Emit event to trigger event rendering
    const weekEnd = DateUtils.addDays(weekStart, 6);
    this.eventBus.emit(EventTypes.CONTAINER_READY_FOR_EVENTS, {
      container: newGrid,
      startDate: weekStart,
      endDate: weekEnd
    });
    
    return newGrid;
  }

  /**
   * Render week content in specific container
   */
  private renderWeekContentInContainer(gridContainer: HTMLElement, weekStart: Date): void {
    const header = gridContainer.querySelector('swp-calendar-header');
    const dayColumns = gridContainer.querySelector('swp-day-columns');
    
    if (!header || !dayColumns) return;

    // Clear existing content
    header.innerHTML = '';
    dayColumns.innerHTML = '';

    // Render headers for target week
    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    for (let i = 0; i < 7; i++) {
      const date = new Date(weekStart);
      date.setDate(date.getDate() + i);
      
      const headerElement = document.createElement('swp-day-header');
      if (this.isToday(date)) {
        headerElement.dataset.today = 'true';
      }
      
      headerElement.innerHTML = `
        <swp-day-name>${days[date.getDay()]}</swp-day-name>
        <swp-day-date>${date.getDate()}</swp-day-date>
      `;
      headerElement.dataset.date = this.formatDate(date);
      
      header.appendChild(headerElement);
    }
    
    // Render day columns for target week
    for (let i = 0; i < 7; i++) {
      const column = document.createElement('swp-day-column');
      const date = new Date(weekStart);
      date.setDate(date.getDate() + i);
      column.dataset.date = this.formatDate(date);
      
      const eventsLayer = document.createElement('swp-events-layer');
      column.appendChild(eventsLayer);
      
      dayColumns.appendChild(column);
    }
  }

  /**
   * Utility method to format date
   */
  private formatDate(date: Date): string {
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  }

  /**
   * Check if date is today
   */
  private isToday(date: Date): boolean {
    const today = new Date();
    return date.toDateString() === today.toDateString();
  }
}