import { Component, OnInit, Output, EventEmitter, AfterViewInit, ElementRef, ViewChild, Input, OnChanges } from '@angular/core';
import MetisMenu from 'metismenujs';
import { Router, NavigationEnd } from '@angular/router';
import { MENU } from './menu';
import { MenuItem } from './menu.model';
import { TranslateService } from '@ngx-translate/core';
import { EventService } from '../../core/services/event.service';
import { UtilityService } from 'src/app/shared/service/utility.service';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit, AfterViewInit, OnChanges {
  @Input() isCondensed = false;
  @Output() mobileMenuButtonClicked = new EventEmitter();

  menu: any;
  menuItems: MenuItem[] = [];
  @ViewChild('sideMenu') sideMenu: ElementRef;
  @ViewChild('componentRef') scrollRef: any;

  constructor(private eventService: EventService, private router: Router, public translate: TranslateService, private utilityService: UtilityService) {
    this.router.events.forEach((event) => {
      if (event instanceof NavigationEnd) {
        this._activateMenuDropdown();
        this._scrollElement();
      }
    });
  }

  ngOnInit() {
    this.initialize();
    this._scrollElement();
  }

  ngAfterViewInit() {
    this.menu = new MetisMenu(this.sideMenu.nativeElement);
    this._activateMenuDropdown();
  }

  ngOnChanges() {
    if (!this.isCondensed && this.sideMenu || this.isCondensed) {
      setTimeout(() => {
        this.menu = new MetisMenu(this.sideMenu.nativeElement);
      });
    } else if (this.menu) {
      this.menu.dispose();
    }
  }

  toggleMobileMenu(event: any) {
    event.preventDefault();
    this.mobileMenuButtonClicked.emit();
  }

  darkSidebar() {
    document.body.setAttribute('data-sidebar', 'dark');
    document.body.removeAttribute('data-sidebar-size');
    document.body.removeAttribute('data-layout-size');
    document.body.removeAttribute('data-keep-enlarged');
    document.body.classList.remove('vertical-collpsed');
  }

  compactSidebar() {
    document.body.setAttribute('data-sidebar-size', 'small');
    document.body.setAttribute('data-sidebar', 'dark');
    document.body.removeAttribute('data-topbar');
    document.body.removeAttribute('data-layout-size');
    document.body.removeAttribute('data-keep-enlarged');
    document.body.classList.remove('sidebar-enable');
    document.body.classList.remove('vertical-collpsed');
  }

  iconSidebar() {
    document.body.classList.add('sidebar-enable');
    document.body.classList.add('vertical-collpsed');
    document.body.setAttribute('data-sidebar-size', 'sm');
    document.body.removeAttribute('data-layout-size');
    document.body.removeAttribute('data-keep-enlarged');
    document.body.removeAttribute('data-topbar');
  }

  boxedLayout() {
    document.body.setAttribute('data-keep-enlarged', 'true');
    document.body.setAttribute('data-layout-size', 'boxed');
    document.body.setAttribute('data-sidebar', 'dark');
    document.body.classList.add('vertical-collpsed');
    document.body.classList.remove('sidebar-enable');
    document.body.removeAttribute('data-topbar');
  }

  coloredSidebar() {
    document.body.setAttribute('data-sidebar', 'colored');
    document.body.removeAttribute('data-sidebar-size');
    document.body.removeAttribute('data-layout-size');
    document.body.classList.remove('vertical-collpsed');
    document.body.removeAttribute('data-topbar');
  }

  _scrollElement() {
    setTimeout(() => {
      if (document.getElementsByClassName("mm-active").length > 0) {
        const currentPosition = document.getElementsByClassName("mm-active")[0]['offsetTop'];
        if (currentPosition > 500)
          if (this.scrollRef.SimpleBar) {
            if (this.scrollRef.SimpleBar.getScrollElement() !== null) {
              this.scrollRef.SimpleBar.getScrollElement().scrollTop = currentPosition + 300;
            }
          }
      }
    }, 300);
  }

  _activateMenuDropdown() {
    this._removeAllClass('mm-active');
    this._removeAllClass('mm-show');
    const links = document.getElementsByClassName('side-nav-link-ref');
    let menuItemEl = null;
    const paths = [];
     for (let i = 0; i < links.length; i++) {
    paths.push(links[i]['hash'].replace('#', '')); // 🔥 FIX
  }
const currentPath = window.location.hash.replace('#', '');
    const itemIndex = paths.indexOf(currentPath);
    if (itemIndex === -1) {
       const strIndex = currentPath.lastIndexOf('/');
    const item = currentPath.substr(0, strIndex).toString();
    menuItemEl = links[paths.indexOf(item)];
    } else {
      menuItemEl = links[itemIndex];
    }
    if (menuItemEl) {
      menuItemEl.classList.add('active');
      const parentEl = menuItemEl.parentElement;
      if (parentEl) {
        parentEl.classList.add('mm-active');
        const parent2El = parentEl.parentElement.closest('ul');
        if (parent2El && parent2El.id !== 'side-menu') {
          parent2El.classList.add('mm-show');
          const parent3El = parent2El.parentElement;
          if (parent3El) {
            parent3El.classList.add('mm-active');
            const parent4El = parent3El.parentElement.closest('ul');
            if (parent4El && parent4El.id !== 'side-menu') {
              parent4El.classList.add('mm-show');
              const parent5El = parent4El.parentElement;
              if (parent5El) {
                parent5El.classList.add('mm-active');
              }
            }
          }
        }
      }
    }
  }

  _removeAllClass(className) {
    const elements = document.getElementsByClassName(className);
    while (elements.length > 0) {
      elements[0].classList.remove(className);
    }
  }
initialize(): void {

  const isLoggedIn = document.cookie.includes('token'); // or your auth check

  if (!isLoggedIn) {
    // 🔥 ONLY BOOK MENU FOR GUEST
    this.menuItems = MENU.filter(item =>
      item.link === '/books-public'
    );
  } else {
    // 🔐 FULL MENU
    this.menuItems = MENU;
  }
}

  trackByFn(index: number, item: MenuItem): number {
    return item.id;
  }

  hasPermission(permission: string): boolean {
    return true;
    // if(permission!=''){
    //   return this.utilityService.hasPermission(permission);
    // }
    // else{
    //   return true;
    // }
  }
  hasRole(role: string[]): boolean {
if(role.length>0){
      return this.utilityService.hasRole(role);
    }
    else{
      return true;
    }

  }

  hasItems(item: MenuItem): boolean {
    return item.subItems && item.subItems.length > 0;
  }
}