marketplaces/src/app/features/project-editor/sections/theme-section.component.ts

import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { PlatformLayoutType, ThemePaletteConfig } from '../../../shared/models/config';

export interface ThemeModeOption {
  value: 'light' | 'dark' | 'system';
  labelKey: string;
  descKey: string;
}

export interface SiteLayoutOption {
  value: PlatformLayoutType;
  labelKey: string;
  descKey: string;
}

@Component({
  selector: 'app-project-editor-theme-section',
  standalone: true,
  imports: [FormsModule, TranslatePipe],
  templateUrl: './theme-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorThemeSectionComponent {
  private readonly facade = inject(ProjectEditorFacade);
  readonly bootstrap = this.facade.bootstrap;

  readonly themeModeOptions: ThemeModeOption[] = [
    { value: 'light', labelKey: 'builder.themeModeLight', descKey: 'builder.themeModeLightDesc' },
    { value: 'dark', labelKey: 'builder.themeModeDark', descKey: 'builder.themeModeDarkDesc' },
    { value: 'system', labelKey: 'builder.themeModeSystem', descKey: 'builder.themeModeSystemDesc' },
  ];

  readonly siteLayoutOptions: SiteLayoutOption[] = [
    { value: 'default', labelKey: 'builder.siteLayoutDefault', descKey: 'builder.siteLayoutDefaultDesc' },
    { value: 'sidebar-left', labelKey: 'builder.siteLayoutSidebarLeft', descKey: 'builder.siteLayoutSidebarLeftDesc' },
    { value: 'carousel-home', labelKey: 'builder.siteLayoutCarouselHome', descKey: 'builder.siteLayoutCarouselHomeDesc' },
    { value: 'minimal', labelKey: 'builder.siteLayoutMinimal', descKey: 'builder.siteLayoutMinimalDesc' },
  ];

  updatePalette<K extends keyof ThemePaletteConfig>(key: K, value: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      theme: { ...current.theme, palette: { ...current.theme.palette, [key]: value } }
    }));
  }

  updateThemeMode(mode: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      theme: { ...current.theme, mode: mode as 'light' | 'dark' | 'system' }
    }));
  }

  updateSiteLayout(type: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      layout: { ...current.layout, type: type as PlatformLayoutType }
    }));
  }

  themeModeDescKey(mode: string): string {
    return this.themeModeOptions.find(option => option.value === mode)?.descKey ?? '';
  }

  siteLayoutDescKey(type: string): string {
    return this.siteLayoutOptions.find(option => option.value === type)?.descKey ?? '';
  }
}