Calendar/src/renderers/ColumnRenderer.ts

// Column rendering strategy interface and implementations

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

/**
 * Interface for column rendering strategies
 */
export interface ColumnRenderer {
  render(columnContainer: HTMLElement, context: ColumnRenderContext): void;
}

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

/**
 * Date-based column renderer (original functionality)
 */
export class DateColumnRenderer implements ColumnRenderer {
  render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
    const { currentWeek, config } = context;
    
    const dates = this.getWeekDates(currentWeek);
    const dateSettings = config.getDateViewSettings();
    const daysToShow = dates.slice(0, dateSettings.weekDays);
    
    console.log('DateColumnRenderer: About to render', daysToShow.length, 'date columns');

    daysToShow.forEach((date) => {
      const column = document.createElement('swp-day-column');
      (column as any).dataset.date = this.formatDate(date);
      
      const eventsLayer = document.createElement('swp-events-layer');
      column.appendChild(eventsLayer);
      
      columnContainer.appendChild(column);
    });
  }

  private getWeekDates(weekStart: Date): Date[] {
    const dates: Date[] = [];
    for (let i = 0; i < 7; i++) {
      const date = new Date(weekStart);
      date.setDate(weekStart.getDate() + i);
      dates.push(date);
    }
    return dates;
  }

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

/**
 * Resource-based column renderer
 */
export class ResourceColumnRenderer implements ColumnRenderer {
  render(columnContainer: HTMLElement, context: ColumnRenderContext): void {
    const { resourceData } = context;
    
    if (!resourceData) {
      console.warn('ResourceColumnRenderer: No resource data available for resource columns');
      return;
    }

    console.log('ResourceColumnRenderer: About to render', resourceData.resources.length, 'resource columns');

    resourceData.resources.forEach((resource) => {
      const column = document.createElement('swp-resource-column');
      (column as any).dataset.resource = resource.name;
      (column as any).dataset.employeeId = resource.employeeId;
      (column as any).dataset.date = resourceData.date;
      
      const eventsLayer = document.createElement('swp-events-layer');
      column.appendChild(eventsLayer);
      
      columnContainer.appendChild(column);
    });
  }
}