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;
}

/**
 * Base class with shared addToAllDay implementation
 */
export abstract class BaseHeaderRenderer implements HeaderRenderer {
  abstract render(calendarHeader: HTMLElement, context: HeaderRenderContext): void;

  /**
   * Expand header to show all-day row
   */
  addToAllDay(dayHeader: HTMLElement): void {
    const root = document.documentElement;
    const currentHeight = parseInt(getComputedStyle(root).getPropertyValue('--all-day-row-height') || '0');
    
    if (currentHeight === 0) {
      // Find the calendar header element to animate
      const calendarHeader = dayHeader.closest('swp-calendar-header') as HTMLElement;
      if (calendarHeader) {
        this.animateHeaderExpansion(calendarHeader);
      }
      console.log('BaseHeaderRenderer: Header expanded for all-day row');
    }
  }

  private animateHeaderExpansion(calendarHeader: HTMLElement): void {
    const root = document.documentElement;
    const currentHeaderHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height'));
    const targetHeight = currentHeaderHeight + ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT;
    
    // Find header spacer
    const headerSpacer = document.querySelector('swp-header-spacer') as HTMLElement;
    
    // Animate both header and spacer simultaneously
    const animations = [
      calendarHeader.animate([
        { height: `${currentHeaderHeight}px` },
        { height: `${targetHeight}px` }
      ], {
        duration: 150,
        easing: 'ease-out',
        fill: 'forwards'
      })
    ];
    
    if (headerSpacer) {
      animations.push(
        headerSpacer.animate([
          { height: `${currentHeaderHeight}px` },
          { height: `${targetHeight}px` }
        ], {
          duration: 150,
          easing: 'ease-out',
          fill: 'forwards'
        })
      );
    }
    
    // Wait for all animations to finish
    Promise.all(animations.map(anim => anim.finished)).then(() => {
      // Set the CSS variable after animation
      root.style.setProperty('--all-day-row-height', `${ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT}px`);
      
      // Create empty all-day containers after animation
      this.createEmptyAllDayContainers(calendarHeader);
      
      // Notify ScrollManager about header height change
      eventBus.emit('header:height-changed');
    });
  }

  private createEmptyAllDayContainers(calendarHeader: HTMLElement): void {
    const dayHeaders = calendarHeader.querySelectorAll('swp-day-header');
    
    dayHeaders.forEach((dayHeader, index) => {
      const date = (dayHeader as HTMLElement).dataset.date;
      if (!date) return;
      
      const columnIndex = index + 1; // 1-based grid index
      const containerKey = `${columnIndex}-1`;
      
      // Check if container already exists
      let container = calendarHeader.querySelector(`swp-allday-container[data-container-key="${containerKey}"]`);
      
      if (!container) {
        // Create empty container
        container = document.createElement('swp-allday-container');
        container.setAttribute('data-container-key', containerKey);
        container.setAttribute('data-date', date);
        (container as HTMLElement).style.gridColumn = `${columnIndex}`;
        (container as HTMLElement).style.gridRow = '2';
        calendarHeader.appendChild(container);
      }
    });
    
    console.log('Created empty all-day containers for all days');
  }
}

/**
 * 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, allDayEvents = [] } = 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);
    });
  }
}

/**
 * Resource-based header renderer
 */
export class ResourceHeaderRenderer extends BaseHeaderRenderer {
  render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
    const { resourceData } = context;
    
    if (!resourceData) {
      console.warn('ResourceHeaderRenderer: No resource data available for resource headers');
      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);
    });

    console.log(`ResourceHeaderRenderer: Rendered ${resourceData.resources.length} resource headers`);
  }
}