import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { SimplebarAngularModule } from 'simplebar-angular';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { navbarData } from './nav-data';
import { SublevelMenuComponent } from './sublevel-menu.component';
import { MenuItem } from './menu.model';

@Component({
  selector: 'bgui-sidebar',
  standalone: true,
  imports: [
    CommonModule,
    MatIconModule,
    SimplebarAngularModule,
    RouterLinkActive,
    RouterLink,
    SublevelMenuComponent,
  ],
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss'],
})
export class SidebarComponent {
  collapsed = true;
  multiple: boolean = false;
  menuCompact = false;
  actionMenuCompact() {
    this.menuCompact = !this.menuCompact;
  }

  protected readonly navbarData = navbarData;

  handleClick(item: MenuItem): void {
    if (!this.multiple) {
      for (const modelItem of this.navbarData) {
        if (item !== modelItem && modelItem.expanded) {
          modelItem.expanded = false;
        }
      }
    }
    item.expanded = !item.expanded;
  }
}