import { TalyPageDataService } from '@allianz/taly-core';
import {
  JumpNavigationMenuConfiguration,
  JumpNavigationMenuEntry,
  JumpNavigationMenuLeafEntry
} from '@allianz/taly-core/schemas';
import { CommonModule } from '@angular/common';
import {
  Component,
  DestroyRef,
  ElementRef,
  EventEmitter,
  inject,
  Input,
  NgZone,
  OnDestroy,
  OnInit,
  Output,
  ViewChild,
  type AfterViewInit
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { RouterModule } from '@angular/router';
import { NxActionModule } from '@aposin/ng-aquila/action';
import { NxIconModule } from '@aposin/ng-aquila/icon';
import { NxSidebarModule } from '@aposin/ng-aquila/sidebar';
import {
  NxFlatTreeControl,
  NxFlatTreeNode,
  NxTreeFlatDataSource,
  NxTreeModule
} from '@aposin/ng-aquila/tree';

type FlatTreeNode = JumpNavigationMenuLeafEntry & NxFlatTreeNode;

@Component({
  selector: 'frame-jump-navigation-menu',
  templateUrl: './jump-navigation-menu.component.html',
  styleUrls: ['./jump-navigation-menu.component.scss'],
  imports: [CommonModule, RouterModule, NxSidebarModule, NxActionModule, NxTreeModule, NxIconModule]
})
export class JumpNavigationMenuComponent implements OnInit, AfterViewInit, OnDestroy {
  @Input({ required: true }) jumpNavigationMenu!: JumpNavigationMenuConfiguration;
  @Output() resizeEvent = new EventEmitter();
  @ViewChild('sidebar', { read: ElementRef }) sidebar!: ElementRef<HTMLElement>;

  private talyPageDataService = inject(TalyPageDataService);
  private destroyRef = inject(DestroyRef);
  private resizeObserver!: ResizeObserver;
  private ngZone = inject(NgZone);

  containsChildren!: boolean;
  treeControl: NxFlatTreeControl<FlatTreeNode> = new NxFlatTreeControl();
  dataSource: NxTreeFlatDataSource<JumpNavigationMenuEntry, FlatTreeNode> =
    new NxTreeFlatDataSource(this.treeControl, [] as JumpNavigationMenuEntry[]);

  ngOnInit() {
    this.containsChildren = this.jumpNavigationMenu.items.some((item) =>
      Boolean(item.children?.length)
    );

    this.dataSource.data = this.jumpNavigationMenu.items as JumpNavigationMenuEntry[];

    this.talyPageDataService.pageId$
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((pageId) => {
        const nodeToExpand = this.treeControl.dataNodes.find((node) => {
          if (node.expandable) {
            return this.treeControl.getDescendants(node).some((child) => child.pageId === pageId);
          }

          return node.pageId === pageId;
        }) as FlatTreeNode | undefined;

        if (nodeToExpand) {
          this.treeControl.expand(nodeToExpand);
        }
      });
  }

  ngAfterViewInit() {
    this.listenToWidthChanges();
  }

  protected hasChild(_: number, node: NxFlatTreeNode) {
    return node.expandable;
  }

  private listenToWidthChanges(): void {
    this.ngZone.runOutsideAngular(() => {
      this.resizeObserver = new ResizeObserver((entries) => {
        const value = entries[0].contentRect.width;
        this.resizeEvent.next(value);
      });
    });

    this.resizeObserver.observe(this.sidebar.nativeElement);
  }

  ngOnDestroy(): void {
    this.resizeObserver.disconnect();
  }
}