import { FocusKeyManager } from '@angular/cdk/a11y';
import {
  AfterViewInit,
  Component,
  EventEmitter,
  HostBinding,
  Input,
  OnChanges,
  Output,
  QueryList,
  ViewChildren
} from '@angular/core';
import { SectionConfig, SectionWithState } from './model';
import { StepState } from './navigation-step-state';
import { NavigationStepComponent } from './navigation-step.component';

@Component({
  selector: 'frame-navigation-view',
  templateUrl: './navigation-view.component.html',
  styleUrls: ['./navigation-view.component.scss'],
  standalone: false
})
export class NavigationViewComponent implements AfterViewInit, OnChanges {
  @HostBinding('class.is-horizontal')
  @Input()
  horizontal = false;
  @Input() collapsed = false;
  @Input() compact = false;
  @Input() sectionStates: SectionWithState[] = [];
  @Input() sections?: SectionConfig;
  @Input() isForbidden = false;
  @Output() goto = new EventEmitter<string>();

  private currentState: SectionWithState | undefined;
  mobileBreadcrumbsText: string | undefined;
  focusIndex: number | null = null;

  @ViewChildren(NavigationStepComponent) items!: QueryList<NavigationStepComponent>;

  private keyManager!: FocusKeyManager<NavigationStepComponent>;

  onKeydown($event: KeyboardEvent, { sectionId }: { sectionId: string }) {
    const key = $event.key;
    if (key === 'Enter') {
      this.requestSection({ sectionId });
      $event.preventDefault();
    } else {
      this.keyManager.onKeydown($event);
      this.focusIndex = this.getFocusIndex();
    }
  }

  ngOnChanges() {
    this.currentState = this.getCurrentState();
    this.mobileBreadcrumbsText = this.getMobileBreadcrumbsText();

    // this.keyManager is not initialized on the first call of ngOnChanges()
    if (this.keyManager) {
      this.keyManager.updateActiveItem(this.currentSectionIndex);
    }
  }

  ngAfterViewInit() {
    this.keyManager = new FocusKeyManager(this.items)
      .withWrap()
      .skipPredicate((item) => item.isPending)
      .withHorizontalOrientation('ltr')
      .withVerticalOrientation();
  }

  getSectionLabel(id: string) {
    const section = this.sections?.get(id);
    return section?.label;
  }

  private getCurrentState(): SectionWithState | undefined {
    return this.sectionStates.find((item) => item.state === StepState.CURRENT);
  }

  private getFocusIndex() {
    return this.keyManager.activeItemIndex;
  }

  get currentSectionIndex() {
    return this.currentState ? this.sectionStates.indexOf(this.currentState) : -1;
  }

  requestSection({ sectionId }: { sectionId: string }) {
    this.goto.emit(sectionId);
  }

  private getMobileBreadcrumbsText(): string | undefined {
    let text;
    if (this.currentState) {
      text =
        $localize`Step ` +
        `${this.currentSectionIndex + 1}/${this.sectionStates.length}: ${this.getSectionLabel(
          this.currentState.sectionId
        )}`;
    }
    return text;
  }
}