Calendar/src/configurations/ConfigManager.ts

import { Configuration } from './CalendarConfig';
import { ICalendarConfig } from './ICalendarConfig';
import { TimeFormatter } from '../utils/TimeFormatter';

/**
 * ConfigManager - Static configuration loader
 * Loads JSON and creates Configuration instance
 * Also manages CSS custom properties for dynamic styling
 */
export class ConfigManager {
  /**
   * Synchronize all CSS custom properties with configuration
   * This ensures CSS grid, time axis, and grid lines match the configuration
   */
  static updateCSSProperties(config: Configuration): void {
    const gridSettings = config.gridSettings;
    const workWeekSettings = config.getWorkWeekSettings();

    // Grid layout
    document.documentElement.style.setProperty('--grid-columns', workWeekSettings.totalDays.toString());

    // Grid timing and dimensions
    document.documentElement.style.setProperty('--hour-height', `${gridSettings.hourHeight}px`);
    document.documentElement.style.setProperty('--day-start-hour', gridSettings.dayStartHour.toString());
    document.documentElement.style.setProperty('--day-end-hour', gridSettings.dayEndHour.toString());
    document.documentElement.style.setProperty('--work-start-hour', gridSettings.workStartHour.toString());
    document.documentElement.style.setProperty('--work-end-hour', gridSettings.workEndHour.toString());
  }

  /**
   * Load configuration from JSON and create Configuration instance
   */
  static async load(): Promise<Configuration> {
    const response = await fetch('/wwwroot/data/calendar-config.json');
    if (!response.ok) {
      throw new Error(`Failed to load config: ${response.statusText}`);
    }

    const data = await response.json();

    // Build main config
    const mainConfig: ICalendarConfig = {
      scrollbarWidth: data.scrollbar.width,
      scrollbarColor: data.scrollbar.color,
      scrollbarTrackColor: data.scrollbar.trackColor,
      scrollbarHoverColor: data.scrollbar.hoverColor,
      scrollbarBorderRadius: data.scrollbar.borderRadius,
      allowDrag: data.interaction.allowDrag,
      allowResize: data.interaction.allowResize,
      allowCreate: data.interaction.allowCreate,
      apiEndpoint: data.api.endpoint,
      dateFormat: data.api.dateFormat,
      timeFormat: data.api.timeFormat,
      enableSearch: data.features.enableSearch,
      enableTouch: data.features.enableTouch,
      defaultEventDuration: data.eventDefaults.defaultEventDuration,
      minEventDuration: data.gridSettings.snapInterval,
      maxEventDuration: data.eventDefaults.maxEventDuration
    };

    // Create Configuration instance
    const config = new Configuration(
      mainConfig,
      data.gridSettings,
      data.dateViewSettings,
      data.timeFormatConfig,
      data.currentWorkWeek
    );

    // Configure TimeFormatter
    TimeFormatter.configure(config.timeFormatConfig);

    // Synchronize all CSS custom properties with configuration
    ConfigManager.updateCSSProperties(config);

    return config;
  }
}