marketplaces/src/app/features/project-editor/sections/features-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 { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';

export interface CatalogNavigationOption {
  value: 'default' | 'left-category-navigation' | 'mega-category-layout' | 'top-category-carousel';
  labelKey: string;
  descKey: string;
}

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

  readonly catalogNavigationOptions: CatalogNavigationOption[] = [
    { value: 'default', labelKey: 'builder.catalogNavDefault', descKey: 'builder.catalogNavDefaultDesc' },
    { value: 'left-category-navigation', labelKey: 'builder.catalogNavLeftCategory', descKey: 'builder.catalogNavLeftCategoryDesc' },
    { value: 'mega-category-layout', labelKey: 'builder.catalogNavMegaCategory', descKey: 'builder.catalogNavMegaCategoryDesc' },
    { value: 'top-category-carousel', labelKey: 'builder.catalogNavTopCarousel', descKey: 'builder.catalogNavTopCarouselDesc' },
  ];

  catalogNavigationDescKey(mode: string | undefined): string {
    return this.catalogNavigationOptions.find(option => option.value === mode)?.descKey ?? '';
  }

  updateCatalogNavigationMode(mode: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      catalog: { ...current.catalog, navigationMode: mode as CatalogNavigationOption['value'] }
    }));
  }

  toggleFeature(key: string, checked: boolean): void {
    this.facade.updateBootstrap(current => ({ ...current, featureFlags: { ...current.featureFlags, [key]: checked } }));
  }

  toggleUserExperience(path: 'recentlyViewed' | 'wishlist' | 'compare', checked: boolean): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      userExperience: {
        ...current.userExperience,
        [path]: {
          ...current.userExperience?.[path],
          enabled: checked
        }
      }
    }));
  }

  toggleCatalog(key: 'suggestionsEnabled' | 'searchHistoryEnabled', checked: boolean): void {
    this.facade.updateBootstrap(current => ({ ...current, catalog: { ...current.catalog, [key]: checked } }));
  }

  toggleProductFeature(section: 'reviews' | 'questions', checked: boolean): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      productPage: {
        ...current.productPage,
        [section]: {
          ...current.productPage?.[section],
          enabled: checked
        }
      }
    }));
  }
}