Calendar/src/configurations/ConfigManager.ts

import { Configuration } from './CalendarConfig';
import { ICalendarConfig } from './ICalendarConfig';
import { TimeFormatter } from '../utils/TimeFormatter';
import { IEventBus } from '../types/CalendarTypes';
import { CoreEvents } from '../constants/CoreEvents';
import { IWorkWeekSettings } from './WorkWeekSettings';

/**
 * ConfigManager - Configuration loader and CSS property manager
 * Loads JSON and creates Configuration instance
 * Listens to events and manages CSS custom properties for dynamic styling
 */
export class ConfigManager {
  private eventBus: IEventBus;
  private config: Configuration;

  constructor(eventBus: IEventBus, config: Configuration) {
    this.eventBus = eventBus;
    this.config = config;

    this.setupEventListeners();
    this.syncGridCSSVariables();
    this.syncWorkweekCSSVariables();
  }

  /**
   * Setup event listeners for dynamic CSS updates
   */
  private setupEventListeners(): void {
    // Listen to workweek changes and update CSS accordingly
    this.eventBus.on(CoreEvents.WORKWEEK_CHANGED, (event: Event) => {
      const { settings } = (event as CustomEvent<{ settings: IWorkWeekSettings }>).detail;
      this.syncWorkweekCSSVariables(settings);
    });
  }

  /**
   * Sync grid-related CSS variables from configuration
   */
  private syncGridCSSVariables(): void {
    const gridSettings = this.config.gridSettings;

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

  /**
   * Sync workweek-related CSS variables
   */
  private syncWorkweekCSSVariables(workWeekSettings?: IWorkWeekSettings): void {
    const settings = workWeekSettings || this.config.getWorkWeekSettings();
    document.documentElement.style.setProperty('--grid-columns', settings.totalDays.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,
      data.currentView || 'week'
    );

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

    return config;
  }
}