import { Component } from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';
import { menuData } from './menu-data';
import { ResourceType } from '../model/controller.model';
import { ISService } from '../is.service';

export interface MenuNode {
  name: string;
  type: string;
  route?: string;
  badge?: string;
  children?: MenuNode[];
}

export interface FlatTreeNode {
  name: string;
  type: string;
  level: number;
  route?: string;
  badge?: string;
  expandable: boolean;
}

@Component({
  selector: 'app-main-menu-tree',
  templateUrl: './main-menu-tree.component.html',
  styleUrls: ['./main-menu-tree.component.css']
})
export class MainMenuTreeComponent {

  /** The TreeControl controls the expand/collapse state of tree nodes.  */
  treeControl: FlatTreeControl<FlatTreeNode>;

  /** The TreeFlattener is used to generate the flat list of items from hierarchical data. */
  treeFlattener: MatTreeFlattener<MenuNode, FlatTreeNode>;

  /** The MatTreeFlatDataSource connects the control and flattener to provide data. */
  dataSource: MatTreeFlatDataSource<MenuNode, FlatTreeNode>;

  constructor(public service:ISService) {
    this.treeFlattener = new MatTreeFlattener(
      this.transformer,
      this.getLevel,
      this.isExpandable,
      this.getChildren);

    this.service.loadResourceTypes((data:ResourceType[]) => {
      let simpleResources: MenuNode[] = []
      let advancedResources: MenuNode[] = []
    
      data.forEach(resType => {
        let item:MenuNode = {
          name: resType.name, 
          type: 'menuitem',
          badge: resType.count.toString()
        }
        if (resType.simple) {
          item.route = '/resources/' + resType.id;
          simpleResources.push(item)
        } else {
          item.route = '/adv_resources/' + resType.id;
          advancedResources.push(item)
        }
      })
      
      menuData.forEach(m => {
        if (m.name=='Simple Resources') {
          m.children = simpleResources
        } else if (m.name=='Advanced Resources') {
          m.children = advancedResources
        }
      })
      this.dataSource.data = menuData;
  });

    this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
    this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
    this.dataSource.data = menuData;

  }

  /** Transform the data to something the tree can read. */
  transformer(node: MenuNode, level: number): FlatTreeNode {
    return {
      name: node.name,
      type: node.type,
      route: node.route,
      badge: node.badge,
      level,
      expandable: !!node.children
    };
  }

  /** Get the level of the node */
  getLevel(node: FlatTreeNode): number {
    return node.level;
  }

  /** Get whether the node is expanded or not. */
  isExpandable(node: FlatTreeNode): boolean {
    return node.expandable;
  }

  /** Get whether the node has children or not. */
  hasChild(index: number, node: FlatTreeNode): boolean {
    return node.expandable;
  }

  /** Get the children for the node. */
  getChildren(node: MenuNode): MenuNode[] | null | undefined {
    return node.children;
  }
}