import { TalyPageDataService } from '@allianz/taly-core';
import {
  Component,
  DestroyRef,
  EventEmitter,
  HostBinding,
  inject,
  Input,
  OnChanges,
  OnInit,
  Output,
  SimpleChanges
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { LocalizeFn } from '@angular/localize/init';
import { TalyFrameLayoutService } from '../../services/frame-layout.service';
import { TalyFrameNavigationService } from '../../services/taly-frame-navigation-service';
import { NavigationConfig, SectionWithState } from './model';
import { StepState } from './navigation-step-state';

declare let $localize: LocalizeFn;

@Component({
  selector: 'frame-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss'],
  standalone: false
})
export class NavigationComponent implements OnInit, OnChanges {
  frameLayoutService = inject(TalyFrameLayoutService);
  talyPageDataService = inject(TalyPageDataService);
  frameNavigationService = inject(TalyFrameNavigationService, { optional: true });

  @HostBinding('class.is-stacked')
  isStacked = false;

  @HostBinding('class.is-collapsed')
  isCollapsed = false;

  @Input()
  @HostBinding('class.has-jump-menu')
  hasJumpNavigationMenu = false;

  @Input() navigationConfig?: NavigationConfig;

  @Output() resizeEvent = new EventEmitter();

  currentSectionStates!: SectionWithState[];

  isForbidden = false;

  // used in the template as aria-labels
  toggleButtonLabel = {
    collapsed: $localize`:@@frame.navigation.progress-indicator.toggle.collapsed:show progress indicator`,
    expanded: $localize`:@@frame.navigation.progress-indicator.toggle.expanded:hide progress indicator`
  };

  private destroyRef = inject(DestroyRef);

  constructor() {
    this.frameLayoutService.isStackedLayoutObservable
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((value) => (this.isStacked = value));
    this.frameLayoutService.collapseNavigationUser$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((value) => (this.isCollapsed = value));
    this.frameNavigationService?.currentSectionStates$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((value) => (this.currentSectionStates = value));
    this.talyPageDataService.pageData$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((value) => {
        this.isForbidden = value.navigation?.preventClickNavigation ?? false;
      });
  }

  ngOnInit() {
    // we check for the jumpNavigationMenu configuration first because sections are always set
    // (even if not defined in the journey configuration because we extract them from the page list)
    if (this.hasJumpNavigationMenu) return;

    this.frameNavigationService?.setSections(this.navigationConfig?.sections);
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['navigationConfig']?.firstChange === false) {
      this.frameNavigationService?.setSections(this.navigationConfig?.sections);
    }
  }

  gotoSection(id: string) {
    const ALLOWED_STATES_FOR_NAVIGATE = [StepState.COMPLETE, StepState.CURRENT];
    const targetSection = this.currentSectionStates.find((section) => section.sectionId === id);
    if (
      !this.isForbidden &&
      targetSection?.state &&
      ALLOWED_STATES_FOR_NAVIGATE.includes(targetSection.state)
    ) {
      this.frameNavigationService?.gotoSection(id);
    }
  }

  get hasService() {
    return !!this.frameNavigationService;
  }

  onResize(value: number) {
    this.resizeEvent.next(value);
  }
}