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

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],
  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 } }));
  }

  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
        }
      }
    }));
  }
}