SettingsService

import { SettingsService } from '@jet/services/settings/settings.service';
import { Settings } from '@jet/interfaces/settings.interface';

import { inject, Component, Signal } from '@angular/core';
import { SettingsService } from '@jet/services/settings/settings.service';
import { Settings } from '@jet/interfaces/settings.interface';

export class AppComponent {
  readonly #settingsService = inject(SettingsService);
  
  readonly settings: Signal<Settings> = this.#settingsService.settings;

  ngOnInit() {
    // Read current settings
    const currentSettings = this.settings();
    console.log('Color scheme:', currentSettings.colorSchemeOption);
    console.log('Language:', currentSettings.languageOption);
  }
}

updateColorScheme(mode: 'light' | 'dark') {
  this.#settingsService.updateSettings({
    colorSchemeOption: {
      mode,
      variant: 'auto'
    }
  });
}

updateLanguage(code: string) {
  this.#settingsService.updateSettings({
    languageOption: {
      code,
      directionality: code === 'ar' ? 'rtl' : 'ltr'
    }
  });
}

export class LayoutComponent {
  readonly #settingsService = inject(SettingsService);
  
  readonly directionality = this.#settingsService.directionality;

  ngOnInit() {
    // Computed signal for text direction
    const direction = this.directionality();
    console.log('Text direction:', direction); // 'ltr' or 'rtl'
  }
}

<div [dir]="settingsService.directionality()">
  <p>Current theme: {{ settings().colorSchemeOption.mode }}</p>
  <p>Language: {{ settings().languageOption.code }}</p>
</div>

public get settings(): Signal<Settings> {
  return this.#settings.asReadonly();
}

const currentSettings = this.settingsService.settings();

// Use in computed signals
const isDarkMode = computed(() => 
  this.settingsService.settings().colorSchemeOption.mode === 'dark'
);

// Use in effects
effect(() => {
  const settings = this.settingsService.settings();
  console.log('Settings changed:', settings);
});

public readonly directionality: Signal<Settings['languageOption']['directionality']>;

// Computed as:
this.directionality = computed(() => this.#settings().languageOption.directionality);

// In component
const direction = this.settingsService.directionality();

// In template
<div [dir]="settingsService.directionality()">
  <!-- Content automatically flips for RTL languages -->
</div>

// In CSS-in-JS
const styles = computed(() => ({
  textAlign: this.settingsService.directionality() === 'rtl' ? 'right' : 'left'
}));

public updateSettings(partialSettings: Partial<Settings>): void {
  this.#settings.update((settings) => ({ ...settings, ...partialSettings }));
}

// Update only color scheme
this.settingsService.updateSettings({
  colorSchemeOption: { mode: 'dark', variant: 'auto' }
});

// Update only language
this.settingsService.updateSettings({
  languageOption: { code: 'es', directionality: 'ltr' }
});

// Update multiple settings
this.settingsService.updateSettings({
  colorSchemeOption: { mode: 'light', variant: 'custom' },
  languageOption: { code: 'ar', directionality: 'rtl' }
});

export interface Settings {
  colorSchemeOption: ColorSchemeOption;
  languageOption: LanguageOption;
}

interface ColorSchemeOption {
  mode: 'light' | 'dark' | 'auto';
  variant?: string;
}

interface LanguageOption {
  code: string;
  directionality: 'ltr' | 'rtl';
}

effect(() => {
  this.#loggerService.logEffectRun('settings');
  const settings = this.#settings();
  
  untracked(() =>
    this.#storageService.setLocalStorageItem(LocalStorageKey.Settings, settings)
  );
}, { debugName: 'settings' });

const storedSettings = this.#storageService.getLocalStorageItem<Settings>(
  LocalStorageKey.Settings
);

this.#settings = signal({ ...DEFAULT_SETTINGS, ...storedSettings });

// Component automatically re-renders when settings change
@Component({
  template: `<div>Current theme: {{ settings().colorSchemeOption.mode }}</div>`
})
export class ThemeComponent {
  readonly settings = inject(SettingsService).settings;
}

// Directionality is computed from language settings
this.directionality = computed(() => 
  this.#settings().languageOption.directionality
);

// src/app/constants/default-settings.constant.ts
import { Settings } from '@jet/interfaces/settings.interface';

export const DEFAULT_SETTINGS: Settings = {
  colorSchemeOption: {
    mode: 'light',
    variant: 'auto'
  },
  languageOption: {
    code: 'en',
    directionality: 'ltr'
  }
};

enum LocalStorageKey {
  Settings = 'settings'
}

@Component({
  selector: 'app-theme-switcher',
  template: `
    <button (click)="toggleTheme()">
      {{ currentTheme() === 'dark' ? 'Light' : 'Dark' }} Mode
    </button>
  `
})
export class ThemeSwitcherComponent {
  readonly #settingsService = inject(SettingsService);
  
  readonly currentTheme = computed(() => 
    this.#settingsService.settings().colorSchemeOption.mode
  );

  toggleTheme() {
    const newMode = this.currentTheme() === 'dark' ? 'light' : 'dark';
    this.#settingsService.updateSettings({
      colorSchemeOption: { mode: newMode, variant: 'auto' }
    });
  }
}

export class LanguageSelectorComponent {
  readonly #settingsService = inject(SettingsService);
  
  readonly languages = [
    { code: 'en', name: 'English', dir: 'ltr' as const },
    { code: 'es', name: 'Español', dir: 'ltr' as const },
    { code: 'ar', name: 'العربية', dir: 'rtl' as const }
  ];

  selectLanguage(code: string, directionality: 'ltr' | 'rtl') {
    this.#settingsService.updateSettings({
      languageOption: { code, directionality }
    });
  }
}

export class SettingsFormComponent implements OnInit {
  readonly #settingsService = inject(SettingsService);
  
  settingsForm = new FormGroup({
    theme: new FormControl('light'),
    language: new FormControl('en')
  });

  ngOnInit() {
    const settings = this.#settingsService.settings();
    this.settingsForm.patchValue({
      theme: settings.colorSchemeOption.mode,
      language: settings.languageOption.code
    });
  }

  onSubmit() {
    const { theme, language } = this.settingsForm.value;
    
    this.#settingsService.updateSettings({
      colorSchemeOption: { mode: theme, variant: 'auto' },
      languageOption: {
        code: language,
        directionality: language === 'ar' ? 'rtl' : 'ltr'
      }
    });
  }
}