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 { ThemePaletteConfig } from '../../../shared/models/config';

@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;

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