Calendar/src/renderers/GridStyleManager.ts

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

interface GridSettings {
  hourHeight: number;
  snapInterval: number;
  dayStartHour: number;
  dayEndHour: number;
  workStartHour: number;
  workEndHour: number;
  fitToWidth?: boolean;
}

/**
 * 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());
    }
    
  }

  /**
   * Set time-related CSS variables
   */
  private setTimeVariables(root: HTMLElement, gridSettings: GridSettings): void {
    root.style.setProperty('--header-height', '80px'); // Fixed header height
    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();
      const workWeekSettings = this.config.getWorkWeekSettings();

      switch (dateSettings.period) {
        case 'day':
          return 1;
        case 'week':
          return workWeekSettings.totalDays;
        case 'month':
          return workWeekSettings.totalDays; // Use work week for month view too
        default:
          return workWeekSettings.totalDays;
      }
    }

    return this.config.getWorkWeekSettings().totalDays; // Default to work week
  }

  /**
   * Set column width based on fitToWidth setting
   */
  private setColumnWidth(root: HTMLElement, gridSettings: GridSettings): 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
    }
  }

}