import { Component, Input } from '@angular/core';
import {
  NxFlatTreeControl,
  NxFlatTreeNode,
  NxTreeFlatDataSource,
  NxTreeNode
} from '@aposin/ng-aquila/tree';

interface PageTreeNode extends NxTreeNode {
  children?: PageTreeNode[];
  label: string;
}

/** Flat node with expandable and level information */
interface PageFlatTreeNode extends NxFlatTreeNode {
  label: string;
}

interface PageDetail {
  pageId: string;
  bbTitles: string[];
}

@Component({
  selector: 'taly-page-hierarchy',
  templateUrl: './page-hierarchy.component.html',
  styleUrl: './page-hierarchy.component.scss',
  standalone: false
})
export class JourneyPageHierarchyComponent {
  @Input() set pageDetails(pageDetails: PageDetail[]) {
    this.pageTreeNodes = this.createTreeNodes(pageDetails);
    this._dataSource = new NxTreeFlatDataSource(this._treeControl, this.pageTreeNodes);
  }

  pageTreeNodes: PageTreeNode[] = [];
  _dataSource!: NxTreeFlatDataSource<PageTreeNode, PageFlatTreeNode>;
  _treeControl: NxFlatTreeControl<PageFlatTreeNode>;

  constructor() {
    this._treeControl = new NxFlatTreeControl();
  }

  _hasChild = (_: number, node: NxFlatTreeNode) => node.expandable;

  private createTreeNodes(pageDetails: PageDetail[]) {
    return pageDetails.map((page) => {
      return {
        label: page.pageId,
        children: page.bbTitles.map((bbTitle) => {
          return {
            label: bbTitle
          };
        })
      };
    });
  }
}