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

@Component({
  selector: 'app-project-editor-header-section',
  standalone: true,
  imports: [FormsModule, TranslatePipe],
  templateUrl: './header-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorHeaderSectionComponent {
  private readonly facade = inject(ProjectEditorFacade);
  readonly bootstrap = this.facade.bootstrap;
  readonly items: Array<{ key: keyof HeaderConfig; label: string; descKey: string }> = [
    { key: 'showLogo', label: 'builder.showLogo', descKey: 'builder.showLogoDesc' },
    { key: 'showSearch', label: 'builder.showSearch', descKey: 'builder.showSearchDesc' },
    { key: 'showCategories', label: 'builder.showCategories', descKey: 'builder.showCategoriesDesc' },
    { key: 'showLanguages', label: 'builder.showLanguages', descKey: 'builder.showLanguagesDesc' },
    { key: 'showCart', label: 'builder.showCart', descKey: 'builder.showCartDesc' },
    { key: 'showProfile', label: 'builder.showProfile', descKey: 'builder.showProfileDesc' },
    { key: 'showWishlist', label: 'builder.showWishlist', descKey: 'builder.showWishlistDesc' },
    { key: 'showCompare', label: 'builder.showCompare', descKey: 'builder.showCompareDesc' },
    { key: 'showRegion', label: 'builder.showRegion', descKey: 'builder.showRegionDesc' },
  ];

  toggle(key: keyof HeaderConfig, checked: boolean): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      header: { ...(current.header ?? {}), [key]: checked }
    }));
  }

  isChecked(key: keyof HeaderConfig): boolean {
    return !!this.bootstrap()?.header?.[key];
  }
}