import { Component, inject, effect, PLATFORM_ID } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderMenu } from './features/header-menu/header-menu';
import { PopupService } from './services/popup.service';
import { SettingsService } from './services/settings.service';
import { NgComponentOutlet, isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, HeaderMenu, NgComponentOutlet],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App {
  protected popupService = inject(PopupService);
  protected settingsService = inject(SettingsService);
  private platformId = inject(PLATFORM_ID);

  constructor() {
    effect(() => {
      if (isPlatformBrowser(this.platformId)) {
        const isDark = this.settingsService.darkMode();
        document.documentElement.classList.toggle('dark-theme', isDark);
        document.documentElement.classList.toggle('light-theme', !isDark);

        const lang = this.settingsService.language();
        document.documentElement.lang = lang.toLowerCase();

        const reduceMotion = this.settingsService.reduceAnimation();
        document.documentElement.classList.toggle('reduce-motion', reduceMotion);
      }
    });
  }
}