import { Component, DOCUMENT, ElementRef, Renderer2, ViewChild, inject } from '@angular/core';
import { Menu, NavService } from '../../../core/services/common/nav.service';
import { Router, RouterOutlet } from '@angular/router';
import { AppStateService } from '../../../core/services/common/app-state.service';
import { Switcher } from '../../ui/switcher/switcher';
import { Header } from '../../ui/header/header';
import { Sidebar } from '../../ui/sidebar/sidebar';
import { HoverEffectSidebarDirective } from '../../../shared/directives/hover-effect-sidebar.directive';
import { PageHeader } from '../../ui/page-header/page-header';
import { Footer } from '../../ui/footer/footer';
import { TabToTop } from '../../ui/tab-to-top/tab-to-top';
import { AppLoader } from '../../ui/app-loader/app-loader';
import { SessionTimeoutService } from '../../../core/services/auth/session-timeout.service';
import { AppContextService } from '../../../core/services/context/app-context.service';
import { AuthService } from '../../../core/services/auth/auth.service';
@Component({
  selector: 'app-content-layout',
  templateUrl: './content-layout.html',
  styleUrl: './content-layout.scss',
  providers: [SessionTimeoutService],
  imports: [
    Switcher,
    Header,
    Sidebar,
    HoverEffectSidebarDirective,
    PageHeader,
    RouterOutlet,
    Footer,
    TabToTop,
    AppLoader,
  ],
})
export class ContentLayout {
  navServices = inject(NavService);
  sessionTimeoutService = inject(SessionTimeoutService);
  private readonly appContextService = inject(AppContextService);
  private readonly authService = inject(AuthService);
  private document = inject<Document>(DOCUMENT);
  private appStateService = inject(AppStateService);
  private elementRef = inject(ElementRef);
  private renderer = inject(Renderer2);
  @ViewChild('responsiveoverlay') responsiveoverlay!: ElementRef<HTMLDivElement>;
  public menuItems!: Menu[];

  constructor() {
    this.sessionTimeoutService.start();

    if (this.authService.isLoggedIn) {
      this.appContextService.ensureMenuInitialized().subscribe();
    }

    this.navServices.items.subscribe((menuItems: any) => {
      this.menuItems = menuItems;
    });
    let html = this.document.documentElement;
    this.appStateService.state$.subscribe(state => {
      if (state) {
        if (window.innerWidth <= 996) {
          html?.setAttribute('data-toggled', html?.getAttribute('data-toggled') == 'close' ? 'close' : 'close');
        }
        if (state.menuStyles == 'menu-hover' || state.menuStyles == 'icon-hover') {
          this.clearNavDropdown()
        }
      }

    });
  }

  clearNavDropdown() {


    this.menuItems?.forEach((a: any) => {
      a.active = false;
      a?.children?.forEach((b: any) => {
        b.active = false;
        b?.children?.forEach((c: any) => {
          c.active = false;
        });
      });
    });
  }

  clickOnBody() {
    this.responsiveoverlay.nativeElement.classList.remove('active');
    const htmlElement = this.document.documentElement;
    this.renderer.removeAttribute(htmlElement, 'data-icon-overlay');
    if (window.innerWidth <= 996) {
      htmlElement?.setAttribute('data-toggled', htmlElement?.getAttribute('data-toggled') == 'close' ? 'close' : 'close');
    }
    const navStyle = htmlElement.getAttribute('data-nav-style');

    if (htmlElement.getAttribute('data-toggled') == 'icon-text-close') {
      this.renderer.removeAttribute(htmlElement, 'data-icon-text');
    }
    if (htmlElement.getAttribute('data-nav-layout') == 'horizontal'
      && window.innerWidth > 996) {
      this.clearNavDropdown();
    }
    else
      if (navStyle === 'menu-click' || navStyle === 'menu-hover' || navStyle === 'icon-click' || navStyle === 'icon-hover') {
        document.querySelector('.double-menu-active')?.setAttribute('style', 'display: none;');
      }

    const switcher = this.elementRef.nativeElement.querySelector('.switcher');
    if (switcher) {
      this.renderer.removeClass(switcher, 'show');
      this.responsiveoverlay.nativeElement.classList.add('active');
    } else {
      this.responsiveoverlay.nativeElement.classList.remove('active');
    }
    const sidebar = this.elementRef.nativeElement.querySelector('.sidebar');
    if (sidebar) {
      this.renderer.removeClass(sidebar, 'show');

    }


  }

  closeMenu() {
    this.menuItems?.forEach((a: any) => {
      if (this.menuItems) {
        a.active = false;
      }
      a?.children?.forEach((b: any) => {
        if (a.children) {
          b.active = false;
        }
      });
    });
  }


  clearToggle() {
    let html = this.elementRef.nativeElement.ownerDocument.documentElement;
    html?.setAttribute('data-toggled', 'close');
    document.querySelector('#responsive-overlay')?.classList.remove('active');
  }


}


