import {Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit} from '@angular/core';
import {Router, RouterOutlet} from "@angular/router";
import {DOCUMENT} from '@angular/common';
import { ScrollPanelModule } from 'primeng/scrollpanel';
import {MenuItem} from 'primeng/api';
import {SideBarAdminComponent} from '../side-bar-admin.component/side-bar-admin.component';
@Component({
  selector: 'app-admin.component',
  imports: [
    RouterOutlet,
    ScrollPanelModule,
    SideBarAdminComponent
  ],
  schemas:[CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './admin.component.html',
  styleUrl: './admin.component.scss'
})
export class AdminComponent implements OnInit {
  private document = inject<Document>(DOCUMENT);
  height = 0;

  items: MenuItem[] | undefined;

  constructor(private router: Router) {
    this.height = 0

  }

  // public props
  navCollapsed: boolean = false;
  navCollapsedMob: boolean = false;

  // public method
  navMobClick() {
    if (this.navCollapsedMob && !document.querySelector('app-navigation.pc-sidebar')?.classList.contains('mob-open')) {
      this.navCollapsedMob = !this.navCollapsedMob;
      setTimeout(() => {
        this.navCollapsedMob = !this.navCollapsedMob;
      }, 100);
    } else {
      this.navCollapsedMob = !this.navCollapsedMob;
    }
    if (document.querySelector('app-navigation.pc-sidebar')?.classList.contains('navbar-collapsed')) {
      document.querySelector('app-navigation.pc-sidebar')?.classList.remove('navbar-collapsed');
    }
  }

  handleKeyDown(event: KeyboardEvent): void {
    if (event.key === 'Escape') {
      this.closeMenu();
    }
  }

  closeMenu() {
    if (document.querySelector('app-navigation.pc-sidebar')?.classList.contains('mob-open')) {
      document.querySelector('app-navigation.pc-sidebar')?.classList.remove('mob-open');
    }
  }

  ngOnInit() {

    if(this.document.defaultView !== null || this.document.defaultView !== undefined) {
      // @ts-ignore
      this.height = this.document.defaultView.innerHeight;
    }
    else
      this.height = 0;

    this.items = [
      {
        label: 'Admin',
        icon: 'pi pi-palette',
        command: () => {
          this.router.navigate(['/main/admin/welcome']);
        },
        items: [
          {
            label: 'Settings',
            icon: 'pi pi-eraser',
            // route: '/main/admin/settings'
            command: () => {
              this.router.navigate(['/main/admin/settings']);
            }
          },
          {
            label: 'System',
            icon: 'pi pi-heart',
            route: '/main/admin/system'
          }
        ]
      }
    ];
  }

}