Calendar/src/renderers/GridStyleManager.ts

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

/**
 * GridStyleManager - Manages CSS variables and styling for the grid
 * Separated from GridManager to follow Single Responsibility Principle
 */
export class GridStyleManager {
  private config: CalendarConfig;

  constructor(config: CalendarConfig) {
    this.config = config;
  }

  /**
   * Update all grid CSS variables
   */
  public updateGridStyles(resourceData: ResourceCalendarData | null = null): void {
    const root = document.documentElement;
    const gridSettings = this.config.getGridSettings();
    const calendar = document.querySelector('swp-calendar') as HTMLElement;
    const calendarType = this.config.getCalendarMode();
    
    // Set CSS variables for time and grid measurements
    this.setTimeVariables(root, gridSettings);
    
    // Set column count based on calendar type
    const columnCount = this.calculateColumnCount(calendarType, resourceData);
    root.style.setProperty('--grid-columns', columnCount.toString());
    
    // Set column width based on fitToWidth setting
    this.setColumnWidth(root, gridSettings);
    
    // Set fitToWidth data attribute for CSS targeting
    if (calendar) {
      calendar.setAttribute('data-fit-to-width', gridSettings.fitToWidth.toString());
    }
    
    console.log('GridStyleManager: Updated grid styles with', columnCount, 'columns for', calendarType, 'calendar');
  }

  /**
   * Set time-related CSS variables
   */
  private setTimeVariables(root: HTMLElement, gridSettings: any): void {
    root.style.setProperty('--hour-height', `${gridSettings.hourHeight}px`);
    root.style.setProperty('--minute-height', `${gridSettings.hourHeight / 60}px`);
    root.style.setProperty('--snap-interval', gridSettings.snapInterval.toString());
    root.style.setProperty('--day-start-hour', gridSettings.dayStartHour.toString());
    root.style.setProperty('--day-end-hour', gridSettings.dayEndHour.toString());
    root.style.setProperty('--work-start-hour', gridSettings.workStartHour.toString());
    root.style.setProperty('--work-end-hour', gridSettings.workEndHour.toString());
  }

  /**
   * Calculate number of columns based on calendar type and view
   */
  private calculateColumnCount(calendarType: string, resourceData: ResourceCalendarData | null): number {
    if (calendarType === 'resource' && resourceData) {
      return resourceData.resources.length;
    } else if (calendarType === 'date') {
      const dateSettings = this.config.getDateViewSettings();
      switch (dateSettings.period) {
        case 'day':
          return 1;
        case 'week':
          return dateSettings.weekDays;
        case 'month':
          return 7;
        default:
          return dateSettings.weekDays;
      }
    }
    
    return 7; // Default
  }

  /**
   * Set column width based on fitToWidth setting
   */
  private setColumnWidth(root: HTMLElement, gridSettings: any): void {
    if (gridSettings.fitToWidth) {
      root.style.setProperty('--day-column-min-width', '50px'); // Small min-width allows columns to fit available space
    } else {
      root.style.setProperty('--day-column-min-width', '250px'); // Default min-width for horizontal scroll mode
    }
  }

  /**
   * Update spacer heights based on all-day events
   */
  public updateSpacerHeights(allDayEventCount: number = 1): void {
    const eventHeight = 26; // Height per all-day event in pixels
    const padding = 0; // Top/bottom padding
    const allDayHeight = allDayEventCount > 0 ? (allDayEventCount * eventHeight) + padding : 0;
    
    // Set CSS variable for dynamic spacer height
    document.documentElement.style.setProperty('--all-day-row-height', `${allDayHeight}px`);
    
    console.log('GridStyleManager: Updated --all-day-row-height to', `${allDayHeight}px`, 'for', allDayEventCount, 'events');
  }

  /**
   * Get current column count
   */
  public getColumnCount(resourceData: ResourceCalendarData | null = null): number {
    const calendarType = this.config.getCalendarMode();
    return this.calculateColumnCount(calendarType, resourceData);
  }
}