import { Maybe } from '@/core';
import { AuthService, BreadcrumbService } from '@/core/services';
import { BreadcrumbComponent } from '@/shared/components';
import { CommonModule } from '@angular/common';
import { Component, computed, ContentChild, inject, Renderer2, TemplateRef } from '@angular/core';
import { NavigationEnd, Router, RouterModule } from '@angular/router';
import { filter, Subscription } from 'rxjs';
import config from 'src/config';
import { LayoutService } from '../service/layout.service';
import { AppFooter } from './app.footer.component';
import { AppSidebar } from './app.sidebar.component';
import { AppTopbar } from './app.topbar.component';

@Component({
  selector: 'app-layout',
  standalone: true,
  imports: [CommonModule, AppTopbar, AppSidebar, RouterModule, AppFooter, BreadcrumbComponent],
  templateUrl: './app.layout.component.html',
})
export class AppLayout {
  overlayMenuOpenSubscription: Subscription;

  menuOutsideClickListener: any;

  @ContentChild('content', { static: true }) content?: TemplateRef<any> | null;
  // @ContentChild('topBarMoreAction', { static: true }) topBarMoreAction?: TemplateRef<any> | null;

  private breadcrumbService = inject(BreadcrumbService);
  private authService = inject(AuthService);

  topBarMoreAction?: Maybe<TemplateRef<any>> = null;
  topBarStartAction?: Maybe<TemplateRef<any>> = null;
  topBarCenterAction?: Maybe<TemplateRef<any>> = null;
  topBarEndAction?: Maybe<TemplateRef<any>> = null;

  constructor(
    public layoutService: LayoutService,
    public renderer: Renderer2,
    public router: Router,
  ) {
    this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
      if (!this.menuOutsideClickListener) {
        this.menuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
          if (this.isOutsideClicked(event)) {
            this.hideMenu();
          }
        });
      }

      if (this.layoutService.layoutState().staticMenuMobileActive) {
        this.blockBodyScroll();
      }
    });

    this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
      this.hideMenu();
    });
  }

  readonly fullPageLoading = computed(() => this.layoutService.layoutState().fullPageLoading);

  isOutsideClicked(event: MouseEvent) {
    const sidebarEl = document.querySelector('.layout-sidebar');
    const topbarEl = document.querySelector('.layout-menu-button');
    const eventTarget = event.target as Node;

    return !(
      sidebarEl?.isSameNode(eventTarget) ||
      sidebarEl?.contains(eventTarget) ||
      topbarEl?.isSameNode(eventTarget) ||
      topbarEl?.contains(eventTarget)
    );
  }

  hideMenu() {
    this.layoutService.layoutState.update((prev) => ({
      ...prev,
      overlayMenuActive: false,
      staticMenuMobileActive: false,
      menuHoverActive: false,
    }));
    if (this.menuOutsideClickListener) {
      this.menuOutsideClickListener();
      this.menuOutsideClickListener = null;
    }
    this.unblockBodyScroll();
  }

  blockBodyScroll(): void {
    if (document.body.classList) {
      document.body.classList.add('blocked-scroll');
    } else {
      document.body.className += ' blocked-scroll';
    }
  }

  unblockBodyScroll(): void {
    if (document.body.classList) {
      document.body.classList.remove('blocked-scroll');
    } else {
      document.body.className = document.body.className.replace(
        new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'),
        ' ',
      );
    }
  }

  get containerClass() {
    return {
      'layout-overlay': this.layoutService.layoutConfig().menuMode === 'overlay',
      'layout-static': this.layoutService.layoutConfig().menuMode === 'static',
      'layout-static-inactive':
        this.layoutService.layoutState().staticMenuDesktopInactive &&
        this.layoutService.layoutConfig().menuMode === 'static',
      'layout-overlay-active': this.layoutService.layoutState().overlayMenuActive,
      'layout-mobile-active': this.layoutService.layoutState().staticMenuMobileActive,
    };
  }

  get showBreadcrumb(): boolean {
    return this.breadcrumbService._items().length > 0;
  }

  get isFixedContentSize(): boolean {
    return this.layoutService.isFixedContentSize() || false;
  }
  get isFullPage(): boolean {
    return this.layoutService.isFullPage() || false;
  }

  showMenu = computed(() => {
    return this.layoutService.menuItems().length > 0;
  });

  ngOnInit() {
    this.layoutService.headerSlot$.subscribe((tpl) => (this.topBarMoreAction = tpl));
    this.layoutService.topbarStartSlot$.subscribe((tpl) => (this.topBarStartAction = tpl));
    this.layoutService.topbarCenterSlot$.subscribe((tpl) => (this.topBarCenterAction = tpl));
    this.layoutService.topbarEndSlot$.subscribe((tpl) => (this.topBarEndAction = tpl));

    if (window.location.pathname === '/') {
      if (!this.authService.currentAccount()) {
        this.router.navigateByUrl('auth');
      } else {
        let redirectUrl = '';

        switch (this.authService.currentAccount()?.type) {
          case 'ADMIN':
            redirectUrl = '/super_admin';
            break;
          case 'PROVIDER':
            redirectUrl = '/provider';
            break;
          case 'PARTNER':
            redirectUrl = '/partner';
            break;
          case 'CONSUMER':
            if (this.authService.currentAccount()?.role === 'OWNER') {
              redirectUrl = '/consumer';
            } else {
              redirectUrl = config.isPosApplication ? '/' : '/pos';
            }
            break;
        }
        if (redirectUrl) {
          this.router.navigateByUrl(redirectUrl);
        }
      }
    }
  }

  ngOnDestroy() {
    if (this.overlayMenuOpenSubscription) {
      this.overlayMenuOpenSubscription.unsubscribe();
    }

    if (this.menuOutsideClickListener) {
      this.menuOutsideClickListener();
    }
  }
}
