import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { TranslateService } from '../../../i18n/translate.service';
import { HeaderConfig } from '../../../shared/models/config';
import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
import { SelectComponent, SelectOption } from '../../../shared/ui/select/select.component';

@Component({
  selector: 'app-project-editor-header-section',
  standalone: true,
  imports: [FormsModule, TranslatePipe, SectionCardComponent, ToggleComponent, FormFieldComponent, SelectComponent],
  templateUrl: './header-section.component.html',
  styleUrls: ['./section.shared.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectEditorHeaderSectionComponent {
  private readonly facade = inject(ProjectEditorFacade);
  private readonly translate = inject(TranslateService);
  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: 'showWishlist', label: 'builder.showWishlist', descKey: 'builder.showWishlistDesc' },
    { key: 'showCompare', label: 'builder.showCompare', descKey: 'builder.showCompareDesc' },
    { key: 'showRegion', label: 'builder.showRegion', descKey: 'builder.showRegionDesc' },
  ];

  private readonly layoutOptions: Array<{ value: string; labelKey: string }> = [
    { value: 'default', labelKey: 'builder.headerLayoutDefault' },
    { value: 'centered', labelKey: 'builder.headerLayoutCentered' },
  ];

  readonly layoutSelectOptions = computed<SelectOption[]>(() =>
    this.layoutOptions.map(option => ({ value: option.value, label: this.translate.t(option.labelKey) }))
  );

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

  readonly isSticky = (): boolean => this.bootstrap()?.header?.sticky !== false;

  toggleSticky(checked: boolean): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      header: { ...(current.header ?? {}), sticky: checked }
    }));
  }

  updateLayout(layout: string): void {
    this.facade.updateBootstrap(current => ({
      ...current,
      header: { ...(current.header ?? {}), layout: layout as HeaderConfig['layout'] }
    }));
  }
}
