import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe';

@Component({
  selector: 'app-project-editor-features-section',
  standalone: true,
  imports: [TranslatePipe],
  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;

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

  toggleRecentViewed(checked: boolean): void {
    this.facade.updateBootstrap(current => ({ ...current, userExperience: { ...current.userExperience, recentlyViewed: { ...current.userExperience!, recentlyViewed: undefined } as any } }));
  }

  toggleUserExperience(path: 'recentlyViewed' | 'wishlist' | 'compare', checked: boolean): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      userExperience: {
        ...current.userExperience,
        [path]: {
          ...(current.userExperience as any)?.[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 as any)?.[section],
          enabled: checked
        }
      }
    }));
  }
}