import { CalendarConfig } from '../core/CalendarConfig';

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(): void {
    const root = document.documentElement;
    const gridSettings = this.config.getGridSettings();
    const calendar = document.querySelector('swp-calendar') as HTMLElement;

    // Set CSS variables for time and grid measurements
    this.setTimeVariables(root, gridSettings);

    // Set column count based on view
    const columnCount = this.calculateColumnCount();
    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 view
   */
  private calculateColumnCount(): number {
    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;
    }
  }

  /**
   * 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
    }
  }

}