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 { ISCommonService } from '../iscommon.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:ISCommonService) {
    this.treeFlattener = new MatTreeFlattener(
      this.transformer,
      this.getLevel,
      this.isExpandable,
      this.getChildren);

    this.service.loadResourceTypes().subscribe((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;
  }
}
