import { CustomButtonComponent } from './../custom-button/custom-button.component';
import { Component, Input, OnInit, OnChanges, ViewChild, ViewContainerRef, ComponentFactoryResolver, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { Menu } from 'src/models/menu/Menu';
import { ButtonConfig } from 'src/models/ButtonConfig';
import { UserManagementComponent } from '../user-management/user-management.component';
import { ActivityComponent } from '../activity/activity.component';
import { DashboardComponent } from '../dashboard/dashboard.component';
import { PolicyComponent } from '../policy/policy.component';
import { UserSettingsComponent } from 'src/app/user-settings/user-settings.component';
import { AlertsComponent } from 'src/app/alerts/alerts.component';

@Component({
  selector: 'app-custom-sidenav-menu',
  templateUrl: './custom-sidenav-menu.component.html',
  styleUrls: ['./custom-sidenav-menu.component.scss']
})
export class CustomSidenavMenuComponent implements OnInit {
  @ViewChild("buttonArea",{read:ViewContainerRef}) buttonArea:ViewContainerRef | any;
  @Input()
  menuCollection!:Menu[] | any;
  @Output()
  buttonSelected = new EventEmitter<any>();
  cleanMenuCollection : Menu[] | any
  buttonConfig: never[] | any;
  componentMap!:any
  selectedMenu: ButtonConfig;
  constructor(private componentFactoryResolver:ComponentFactoryResolver,private cdr : ChangeDetectorRef) {
    this.componentMap  = {
      "Users":UserManagementComponent,
      "Activity":ActivityComponent,
      "Policy":PolicyComponent,
      "Dashboard":DashboardComponent,
      "User Settings":UserSettingsComponent,
      "Alerts": AlertsComponent
    }
  }

  ngOnInit(): void {
  }
  ngOnChanges(menuCollection:Menu[] | any){


  }

  ngAfterViewInit(){
    this.cleanMenuCollection = [];
    this.menuCollection.forEach((menuTemp:Menu) => {
      let foundMenuItemsInBefore :any = this.cleanMenuCollection.find((data :Menu | any) => {
        if(menuTemp.type ==  data.type){
          return data;
        }
      })
      if(foundMenuItemsInBefore == undefined){
        this.cleanMenuCollection.push(menuTemp)
      }
    });


    this.createButtons();
  }
  createButtons() {
    this.buttonArea?.clear();
    this.buttonConfig = this.cleanMenuCollection.map((data:Menu)=>{
      let key :any = this.componentMap[data.type];
      let obj = {icon:data.icon,buttonClass:"btn-transparent",status:"passive",click:(event:any) => this.clickOnMenu(event),text:data.type,menuComponent:key}
      let compRef = this.componentFactoryResolver.resolveComponentFactory(CustomButtonComponent);
      let comp = this.buttonArea.createComponent(compRef);
      comp.instance.config = obj
      return obj
    })
    let dashboardButton=this.buttonConfig.find(config => config.text == 'Dashboard');
    dashboardButton.buttonClass = "btn-transparent menu-active"
    this.buttonSelected.emit(dashboardButton.menuComponent)
    this.cdr.detectChanges();
  }
  clickOnMenu(event:any){
    this.buttonConfig=this.buttonConfig.map((menuItem:ButtonConfig)=>{
      if(event.config != menuItem){
        menuItem.buttonClass = 'btn-transparent';

      }else{
        menuItem.buttonClass = "btn-transparent menu-active"
        if(this.selectedMenu?.text != menuItem.text){
          this.selectedMenu = menuItem
          this.buttonSelected.emit(menuItem.menuComponent)
        }
      }
      return menuItem
    })

  }
  // this.navbarButton = { icon: 'fas fa-bars', buttonClass: 'btn-transparent', status: "passive", click: (event: any) => this.navbarClick(event) }
  getKeyByValue(object: { [x: string]: any; }, value: any) {
    return Object.keys(object).find(key => object[key] === value);
  }
}