import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { NavigationEnd, Router, RouterLink } from '@angular/router';
import { filter } from 'rxjs';

interface MenuItem {
  title: string;
  link?: string;
  isOpen?: boolean;
  subMenu?: MenuItem[];
}

@Component({
  selector: 'app-mobile-nav',
  imports: [CommonModule, RouterLink],
  template: `
    <ul class="mobile-nav">
      @for (item of menu; track $index) {
      <li class="nav-item" [class.has-sub]="item.subMenu">
        <a
          [routerLink]="item.link || ''"
          (click)="item.subMenu ? toggleSubMenu(item, $event) : null"
          [class.hash-nav]="item.link === '#'"
        >
          {{ item.title }}
        </a>
        @if (item.subMenu) {
        <span
          class="submenu-button"
          [class.submenu-opened]="item.isOpen"
          (click)="toggleSubMenu(item, $event)"
        >
          <em></em>
        </span>
        }

        @if (item.subMenu) {
        <ul class="mobile-menu-sub" [class.sub-menu-active]="item.isOpen">
          @for (sub of item.subMenu; track $index) {
          <li [class.has-dropdown1]="sub.subMenu">
            <a
              [routerLink]="sub.link || '#'"
              (click)="sub.subMenu ? toggleSubMenu(sub, $event) : null"
              [class.hash-nav]="item.link === '#'"
            >
              {{ sub.title }}
            </a>
            @if (sub.subMenu) {
            <span
              class="submenu-button"
              [class.submenu-opened]="sub.isOpen"
              (click)="toggleSubMenu(sub, $event)"
            >
              <em></em>
            </span>
            }
            @if (sub.subMenu) {
            <ul class="mobile-menu-sub" [class.sub-menu-active]="sub.isOpen">
              @for (deep of sub.subMenu; track $index) {
              <li>
                <a [routerLink]="deep.link">{{ deep.title }}</a>
              </li>
              }
            </ul>
            }
          </li>
          }
        </ul>
        }
      </li>
      }
    </ul>
  `,
  styles: ``,
})
export class MobileNavComponent {
  menu: MenuItem[] = [
    {
      title: 'Home',
      subMenu: [
        {
          title: 'Multipage',
          subMenu: [
            { title: 'Home 1', link: '/multi/home-1' },
            { title: 'Home 2', link: '/multi/home-2' },
            { title: 'Home 3', link: '/multi/home-3' },
            { title: 'Home 4', link: '/multi/home-4' },
            { title: 'Home 5', link: '/multi/home-5' },
            { title: 'Home 6', link: '/multi/home-6' },
            { title: 'Home 7', link: '/multi/home-7' },
            { title: 'Home 8', link: '/multi/home-8' },
            { title: 'Home 9', link: '/multi/home-9' },
            { title: 'Home 10', link: '/multi/home-10' },
          ],
        },
        {
          title: 'Landing Page',
          subMenu: [
            { title: 'Home 1', link: '/single/home-1' },
            { title: 'Home 2', link: '/single/home-2' },
            { title: 'Home 3', link: '/single/home-3' },
            { title: 'Home 4', link: '/single/home-4' },
            { title: 'Home 5', link: '/single/home-5' },
            { title: 'Home 6', link: '/single/home-6' },
            { title: 'Home 7', link: '/single/home-7' },
            { title: 'Home 8', link: '/single/home-8' },
            { title: 'Home 9', link: '/single/home-9' },
            { title: 'Home 10', link: '/single/home-10' },
          ],
        },
      ],
    },
    { title: 'About Us', link: '/about' },
    {
      title: 'Service',
      subMenu: [
        {
          title: 'Our Service',
          subMenu: [
            { title: 'Our Service 1', link: '/service' },
            { title: 'Our Service 2', link: '/service2' },
          ],
        },
        { title: 'Service Details', link: '/service-details' },
      ],
    },
    {
      title: 'Pages',
      subMenu: [
        { title: 'Case Study', link: '/case' },
        { title: 'Case Details 1', link: '/case-details1' },
        { title: 'Case Details 2', link: '/case-details2' },
        { title: 'FAQ', link: '/faq' },
        { title: '404', link: '/error' },
      ],
    },
    {
      title: 'Shop',
      subMenu: [
        {
          title: 'Shop',
          subMenu: [
            { title: 'Shop', link: '/shop' },
            { title: 'Shop Left', link: '/shop-sidebar-left' },
            { title: 'Shop Right', link: '/shop-sidebar-right' },
          ],
        },
        {
          title: 'Others',
          subMenu: [
            { title: 'Cart', link: '/cart' },
            { title: 'Checkout', link: '/checkout' },
            { title: 'Account 1', link: '/account' },
            { title: 'Account 2', link: '/account2' },
          ],
        },
        { title: 'Shop Details', link: '/shop-details' },
      ],
    },
    {
      title: 'Blog',
      subMenu: [
        {
          title: 'Blog',
          subMenu: [
            { title: 'Blog 1', link: '/blog' },
            { title: 'Blog 2', link: '/blog2' },
            { title: 'Blog Left', link: '/blog-sidebar-left' },
            { title: 'Blog Right', link: '/blog-sidebar-right' },
          ],
        },
        {
          title: 'Blog Details',
          subMenu: [
            { title: 'Details Left', link: '/blog-details-sidebar-left' },
            { title: 'Details Right', link: '/blog-details-sidebar-right' },
            { title: 'Single Details', link: '/blog-details' },
          ],
        },
      ],
    },
    { title: 'Contact Us', link: '/contact' },
    { title: 'Get Started', link: '/contact' },
  ];
  
    closeAllMenus(): void {
    const closeRecursive = (items: MenuItem[]) => {
      for (const item of items) {
        item.isOpen = false;
        if (item.subMenu) {
          closeRecursive(item.subMenu);
        }
      }
    };
    closeRecursive(this.menu);
  }

toggleSubMenu(item: MenuItem, event: Event): void {
  event.preventDefault();
  event.stopPropagation();
  item.isOpen = !item.isOpen;
}

  constructor(public router: Router) {
    this.router.events
      .pipe(filter((event) => event instanceof NavigationEnd))
      .subscribe(() => {
        this.closeAllMenus();
      });
  }

}
