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 { NavigationItemConfig } from '../../../shared/models/config';
import { ButtonComponent } from '../../../shared/ui/button/button.component';
import { InputComponent } from '../../../shared/ui/input/input.component';

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

  readonly headerLinks = computed(() => this.sorted(this.bootstrap()?.navigation.header ?? []));
  readonly footerLinks = computed<NavigationItemConfig[] | null>(() => {
    const footer = this.bootstrap()?.navigation.footer ?? [];
    if (footer.length === 0) {
      return [];
    }
    return 'items' in footer[0] ? null : this.sorted(footer as NavigationItemConfig[]);
  });

  labelOf(item: NavigationItemConfig): string {
    if (typeof item.label === 'string' || !item.label) {
      return item.label ?? '';
    }
    const defaultLocale = this.bootstrap()?.localization.defaultLocale ?? 'en';
    return item.label[defaultLocale] ?? Object.values(item.label)[0] ?? '';
  }

  addLink(target: 'header' | 'footer'): void {
    this.facade.addNavLink(target);
  }

  removeLink(target: 'header' | 'footer', id: string): void {
    this.facade.removeNavLink(target, id);
  }

  move(target: 'header' | 'footer', id: string, direction: -1 | 1): void {
    this.facade.reorderNavLink(target, id, direction);
  }

  updateLabel(target: 'header' | 'footer', id: string, value: string): void {
    this.facade.updateNavLinkLabel(target, id, value);
  }

  updateRoute(target: 'header' | 'footer', id: string, value: string): void {
    this.facade.updateNavLink(target, id, { route: value });
  }

  updateVisible(target: 'header' | 'footer', id: string, value: boolean): void {
    this.facade.updateNavLink(target, id, { visible: value });
  }

  private sorted(items: NavigationItemConfig[]): NavigationItemConfig[] {
    return [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
  }
}