Calendar/src/renderers/DateHeaderRenderer.ts

// Header rendering strategy interface and implementations

import { CalendarConfig } from '../core/CalendarConfig';
import { DateService } from '../utils/DateService';

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


/**
 * Context for header rendering
 */
export interface HeaderRenderContext {
  currentWeek: Date;
  config: CalendarConfig;
}

/**
 * Date-based header renderer (original functionality)
 */
export class DateHeaderRenderer implements IHeaderRenderer {
  private dateService!: DateService;

  render(calendarHeader: HTMLElement, context: HeaderRenderContext): void {
    const { currentWeek, config } = context;

    // FIRST: Always create all-day container as part of standard header structure
    const allDayContainer = document.createElement('swp-allday-container');
    calendarHeader.appendChild(allDayContainer);

    // Initialize date service with timezone and locale from config
    const timezone = config.getTimezone();
    const locale = config.getLocale();
    this.dateService = new DateService(config);

    const workWeekSettings = config.getWorkWeekSettings();
    const dates = this.dateService.getWorkWeekDates(currentWeek, workWeekSettings.workDays);
    const weekDays = config.getDateViewSettings().weekDays;
    const daysToShow = dates.slice(0, weekDays);

    daysToShow.forEach((date, index) => {
      const header = document.createElement('swp-day-header');
      if (this.dateService.isSameDay(date, new Date())) {
        (header as any).dataset.today = 'true';
      }

      const dayName = this.dateService.getDayName(date, 'long', locale).toUpperCase();

      header.innerHTML = `
        <swp-day-name>${dayName}</swp-day-name>
        <swp-day-date>${date.getDate()}</swp-day-date>
      `;
      (header as any).dataset.date = this.dateService.formatISODate(date);

      calendarHeader.appendChild(header);
    });
  }
}