Calendar/src/renderers/HeaderRenderer.ts

// Header rendering strategy interface and implementations

import { CalendarConfig } from '../core/CalendarConfig';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { DateCalculator } from '../utils/DateCalculator';

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


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

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

  render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
    const { currentWeek, config } = context;
    
    // Initialize date calculator with config
    DateCalculator.initialize(config);
    this.dateCalculator = new DateCalculator();
    
    const dates = 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 (DateCalculator.isToday(date)) {
        (header as any).dataset.today = 'true';
      }
      
      const dayName = 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 = DateCalculator.formatISODate(date);
      
      calendarHeader.appendChild(header);
    });
  }
}

/**
 * Resource-based header renderer
 */
export class ResourceHeaderRenderer implements HeaderRenderer {
  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);
    });
  }
}