import { Component, Input, ViewChild } from '@angular/core';
import { MatDrawer } from '@angular/material/sidenav';
import { Subscription } from 'rxjs';
import { SidebarService } from '../services/sidebar.service';

export interface IMenuSection {
    menuSectionName: string;
    menuItems: IMenuItem[];
}

interface IMenuItem {
    menuItemName: string;
    url: string;
}

@Component({
    selector: 'kit-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrl: './sidebar.component.scss'
})
export class SidebarComponent {
    @ViewChild('drawer') drawer!: MatDrawer;
    @Input() menuData : IMenuSection[] = [];
    private subscription!: Subscription;

    constructor(private sidebarService: SidebarService) {}
    
    ngAfterViewInit() {
        this.subscription = this.sidebarService.drawerState$.subscribe((): void => {
            setTimeout(() => {
                this.drawer.toggle();
            });
        }
        )
    }

    ngOnDestroy(): void {
        this.subscription.unsubscribe();
    }

}