Calendar/src/renderers/HeaderRenderer.ts

// Header rendering strategy interface and implementations

import { CalendarConfig, ALL_DAY_CONSTANTS } from '../core/CalendarConfig';
import { eventBus } from '../core/EventBus';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { DateCalculator } from '../utils/DateCalculator';

/**
 * Interface for header rendering strategies
 */
export interface HeaderRenderer {
  render(calendarHeader: HTMLElement, context: HeaderRenderContext): void;
  addToAllDay(dayHeader: HTMLElement): void;
  ensureAllDayContainers(calendarHeader: HTMLElement): void;
  checkAndAnimateAllDayHeight(): void;
}

/**
 * Base class with shared addToAllDay implementation
 */
export abstract class BaseHeaderRenderer implements HeaderRenderer {
  // Cached DOM elements to avoid redundant queries
  private cachedCalendarHeader: HTMLElement | null = null;
  private cachedAllDayContainer: HTMLElement | null = null;
  private cachedHeaderSpacer: HTMLElement | null = null;
  
  abstract render(calendarHeader: HTMLElement, context: HeaderRenderContext): void;

  /**
   * Get cached calendar header element
   */
  private getCalendarHeader(): HTMLElement | null {
    if (!this.cachedCalendarHeader) {
      this.cachedCalendarHeader = document.querySelector('swp-calendar-header');
    }
    return this.cachedCalendarHeader;
  }

  /**
   * Get cached all-day container element
   */
  private getAllDayContainer(): HTMLElement | null {
    if (!this.cachedAllDayContainer) {
      const calendarHeader = this.getCalendarHeader();
      if (calendarHeader) {
        this.cachedAllDayContainer = calendarHeader.querySelector('swp-allday-container');
      }
    }
    return this.cachedAllDayContainer;
  }

  /**
   * Get cached header spacer element
   */
  private getHeaderSpacer(): HTMLElement | null {
    if (!this.cachedHeaderSpacer) {
      this.cachedHeaderSpacer = document.querySelector('swp-header-spacer');
    }
    return this.cachedHeaderSpacer;
  }

  /**
   * Calculate all-day height based on number of rows
   */
  private calculateAllDayHeight(targetRows: number): {
    targetHeight: number;
    currentHeight: number;
    heightDifference: number;
  } {
    const root = document.documentElement;
    const targetHeight = targetRows * ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT;
    const currentHeight = parseInt(getComputedStyle(root).getPropertyValue('--all-day-row-height') || '0');
    const heightDifference = targetHeight - currentHeight;
    
    return { targetHeight, currentHeight, heightDifference };
  }

  /**
   * Clear cached DOM elements (call when DOM structure changes)
   */
  private clearCache(): void {
    this.cachedCalendarHeader = null;
    this.cachedAllDayContainer = null;
    this.cachedHeaderSpacer = null;
  }

  /**
   * Expand header to show all-day row
   */
  addToAllDay(dayHeader: HTMLElement): void {
    const { currentHeight } = this.calculateAllDayHeight(0);
    
    if (currentHeight === 0) {
      // Find the calendar header element to animate
      const calendarHeader = dayHeader.closest('swp-calendar-header') as HTMLElement;
      if (calendarHeader) {
        // Ensure container exists BEFORE animation
        this.createAllDayMainStructure(calendarHeader);
        this.checkAndAnimateAllDayHeight();
      }
    }
  }

  /**
   * Ensure all-day containers exist - always create them during header rendering
   */
  ensureAllDayContainers(calendarHeader: HTMLElement): void {
    this.createAllDayMainStructure(calendarHeader);
  }

  checkAndAnimateAllDayHeight(): void {
    const container = this.getAllDayContainer();
    if (!container) return;
    
    const allDayEvents = container.querySelectorAll('swp-allday-event');
    
    // Calculate required rows - 0 if no events (will collapse)
    let maxRows = 0;
    
    if (allDayEvents.length > 0) {
      // Expand events to all dates they span and group by date
      const expandedEventsByDate: Record<string, string[]> = {};
      
      (Array.from(allDayEvents) as HTMLElement[]).forEach((event: HTMLElement) => {
        const startISO = event.dataset.start || '';
        const endISO = event.dataset.end || startISO;
        const eventId = event.dataset.eventId || '';
        
        // Extract dates from ISO strings
        const startDate = startISO.split('T')[0]; // YYYY-MM-DD
        const endDate = endISO.split('T')[0]; // YYYY-MM-DD
        
        // Loop through all dates from start to end
        let current = new Date(startDate);
        const end = new Date(endDate);
        
        while (current <= end) {
          const dateStr = current.toISOString().split('T')[0]; // YYYY-MM-DD format
          
          if (!expandedEventsByDate[dateStr]) {
            expandedEventsByDate[dateStr] = [];
          }
          expandedEventsByDate[dateStr].push(eventId);
          
          // Move to next day
          current.setDate(current.getDate() + 1);
        }
      });
      
      // Find max rows needed
      maxRows = Math.max(
        ...Object.values(expandedEventsByDate).map(ids => ids?.length || 0),
        0
      );
    }
    
    // Animate to required rows (0 = collapse, >0 = expand)
    this.animateToRows(maxRows);
  }

  /**
   * Animate all-day container to specific number of rows
   */
  animateToRows(targetRows: number): void {
    const { targetHeight, currentHeight, heightDifference } = this.calculateAllDayHeight(targetRows);
    
    if (targetHeight === currentHeight) return; // No animation needed
    
    console.log(`🎬 All-day height animation starting: ${currentHeight}px → ${targetHeight}px (${Math.ceil(currentHeight / ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT)} → ${targetRows} rows)`);
    
    // Get cached elements
    const calendarHeader = this.getCalendarHeader();
    const headerSpacer = this.getHeaderSpacer();
    const allDayContainer = this.getAllDayContainer();
    
    if (!calendarHeader || !allDayContainer) return;
    
    // Get current parent height for animation
    const currentParentHeight = parseFloat(getComputedStyle(calendarHeader).height);
    const targetParentHeight = currentParentHeight + heightDifference;
    
    const animations = [
      calendarHeader.animate([
        { height: `${currentParentHeight}px` },
        { height: `${targetParentHeight}px` }
      ], {
        duration: 300,
        easing: 'ease-out',
        fill: 'forwards'
      })
    ];
    
    // Add spacer animation if spacer exists
    if (headerSpacer) {
      const root = document.documentElement;
      const currentSpacerHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height')) + currentHeight;
      const targetSpacerHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height')) + targetHeight;
      
      animations.push(
        headerSpacer.animate([
          { height: `${currentSpacerHeight}px` },
          { height: `${targetSpacerHeight}px` }
        ], {
          duration: 300,
          easing: 'ease-out',
          fill: 'forwards'
        })
      );
    }
    
    // Update CSS variable after animation
    Promise.all(animations.map(anim => anim.finished)).then(() => {
      const root = document.documentElement;
      root.style.setProperty('--all-day-row-height', `${targetHeight}px`);
      eventBus.emit('header:height-changed');
    });
  }

  private createAllDayMainStructure(calendarHeader: HTMLElement): void {
    // Check if container already exists
    let container = calendarHeader.querySelector('swp-allday-container');
    
    if (!container) {
      // Create simple all-day container (initially hidden)
      container = document.createElement('swp-allday-container');
      calendarHeader.appendChild(container);
      // Clear cache since DOM structure changed
      this.clearCache();
    }
  }

  /**
   * Public cleanup method for cached elements
   */
  public destroy(): void {
    this.clearCache();
  }
}

/**
 * Context for header rendering
 */
export interface HeaderRenderContext {
  currentWeek: Date;
  config: CalendarConfig;
  resourceData?: ResourceCalendarData | null;
}

/**
 * Date-based header renderer (original functionality)
 */
export class DateHeaderRenderer extends BaseHeaderRenderer {
  private dateCalculator!: DateCalculator;

  render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
    const { currentWeek, config } = context;
    
    // Initialize date calculator with config
    this.dateCalculator = new DateCalculator(config);
    
    const dates = this.dateCalculator.getWorkWeekDates(currentWeek);
    const weekDays = config.getDateViewSettings().weekDays;
    const daysToShow = dates.slice(0, weekDays);

    daysToShow.forEach((date, index) => {
      const header = document.createElement('swp-day-header');
      if (this.dateCalculator.isToday(date)) {
        (header as any).dataset.today = 'true';
      }
      
      const dayName = this.dateCalculator.getDayName(date, 'short');
      
      header.innerHTML = `
        <swp-day-name>${dayName}</swp-day-name>
        <swp-day-date>${date.getDate()}</swp-day-date>
      `;
      (header as any).dataset.date = this.dateCalculator.formatISODate(date);
      
      calendarHeader.appendChild(header);
    });
    
    // Always create all-day container after rendering headers
    this.ensureAllDayContainers(calendarHeader);
  }
}

/**
 * Resource-based header renderer
 */
export class ResourceHeaderRenderer extends BaseHeaderRenderer {
  render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
    const { resourceData } = context;
    
    if (!resourceData) {
      return;
    }

    resourceData.resources.forEach((resource) => {
      const header = document.createElement('swp-resource-header');
      header.setAttribute('data-resource', resource.name);
      header.setAttribute('data-employee-id', resource.employeeId);
      
      header.innerHTML = `
        <swp-resource-avatar>
          <img src="${resource.avatarUrl}" alt="${resource.displayName}" onerror="this.style.display='none'">
        </swp-resource-avatar>
        <swp-resource-name>${resource.displayName}</swp-resource-name>
      `;
      
      calendarHeader.appendChild(header);
    });

    // Always create all-day container after rendering headers
    this.ensureAllDayContainers(calendarHeader);
  }
}