import { DOCUMENT } from '@angular/common';
import { Injectable, inject } from '@angular/core';
import { take } from 'rxjs/operators';
import { ConfigService } from '../../core/config/config.service';
import { ThemeConfig } from '../../shared/models/config';
import { mapThemeConfigToCssVariables } from '../mappers/theme-css-vars.mapper';

@Injectable({ providedIn: 'root' })
export class ThemeEngineService {
  private readonly document = inject(DOCUMENT);
  private readonly configService = inject(ConfigService);

  initialize(): void {
    this.configService.loadBootstrap().pipe(take(1)).subscribe({
      next: (bootstrap) => this.applyTheme(bootstrap.theme),
      error: () => {
        // Theme bootstrapping should not break app startup.
      }
    });
  }

  applyTheme(theme: ThemeConfig): void {
    const variables = mapThemeConfigToCssVariables(theme);
    const root = this.document.documentElement;

    for (const [name, value] of Object.entries(variables)) {
      root.style.setProperty(name, value);
    }

    root.setAttribute('data-theme-id', theme.themeId);
    root.setAttribute('data-theme-mode', theme.mode);
    root.setAttribute('data-icon-set', theme.iconSet);
  }
}
