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 {
  /**
   * Update CSS custom property for grid columns
   * This ensures the CSS grid matches the number of visible columns
   */
  static updateGridColumns(weekDays: number): void {
    document.documentElement.style.setProperty('--grid-columns', weekDays.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);

    // Set initial CSS grid columns based on the current work week preset
    const workWeekSettings = config.getWorkWeekSettings();
    ConfigManager.updateGridColumns(workWeekSettings.totalDays);

    return config;
  }
}