import { Injectable, signal, effect } from '@angular/core';
import { StorageService } from './storage.service';

@Injectable({ providedIn: 'root' })
export class ThemeService {
  readonly isDark = signal<boolean>(false);

  constructor(private storage: StorageService) {
    const saved = this.storage.get<boolean>('theme_dark');
    if (saved !== null) {
      this.isDark.set(saved);
    }
    effect(() => {
      const dark = this.isDark();
      document.documentElement.classList.toggle('dark', dark);
      this.storage.set('theme_dark', dark);
    });
  }

  toggle(): void {
    this.isDark.update(v => !v);
  }
}