import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router, RouterOutlet } from '@angular/router';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { IconsModule } from '@progress/kendo-angular-icons';
import { SVGIcon, chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
import { DrawerItemExpandedFn, DrawerSelectEvent } from '@progress/kendo-angular-layout';
import { LayoutService } from '../services/layout.service';
import { drawerItems } from '../../features/dashboard/models';
import { FooterComponent } from '../footer/footer.component';

@Component({
    selector: 'app-navbar',
    standalone: true,
    imports: [
        CommonModule,
        RouterOutlet,
        LayoutModule,
        IconsModule,
        FooterComponent
    ],
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent {
    public chevronUpIcon: SVGIcon = chevronUpIcon;
    public chevronDownIcon: SVGIcon = chevronDownIcon;

    public drawerItems = drawerItems;
    public selectedDrawerItem = 'Dashboard';
    public expandedItems: Array<number> = [4];

    constructor(
        private router: Router,
        public layoutService: LayoutService
    ) { }

    public onSelect(ev: DrawerSelectEvent): void {
        this.selectedDrawerItem = ev.item.text;
        const current = ev.item.id;

        if (this.expandedItems.indexOf(current) >= 0) {
            this.expandedItems = this.expandedItems.filter((id) => id !== current);
        } else {
            this.expandedItems.push(current);
        }

        // Auto-collapse drawer on mobile after selection
        if (this.layoutService.isMobile()) {
            this.layoutService.closeDrawer();
        }

        // Navigate based on the selected item
        const routeMap: { [key: string]: string } = {
            'Dashboard': '/dashboard',
            'Schedule': '/schedule',
            'Patients': '/patients',
            'Bed Management': '/bed-management',
            'Staff': '/staff',
            'Pharmacy': '/pharmacy',
            'Reports': '/reports',
            'Departments': '/departments',
            'Payments': '/payments',
            'Support': '/support'
        };

        const route = routeMap[ev.item.text];
        if (route) {
            this.router.navigate([route]);
        }
    }

    public isItemExpanded: DrawerItemExpandedFn = (item): boolean => {
        return this.expandedItems.indexOf(item.id) >= 0;
    };
}