import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

type NavItem = {
  label: string;
  link?: string;
  iconClass?: string;
  children?: NavItem[];
};

@Component({
  selector: 'app-nav-list',
  imports: [RouterLink],
  template: `
    <ul>
      @for (item of headerMenu; track item.label) {
      <li
        class="{{ item.children ? 'has-dropdown' : '' }} {{
          item.label === 'Pages' ? 'dropdown-menu-parrent' : ''
        }}"
      >
        <a [routerLink]="item.link === '#' || !item.link ? [] : item.link">
          {{ item.label }}
          @if (item.iconClass) {
          <i class="{{ item.iconClass }}"></i>
          }
        </a>

        @if (item.children) {
        <ul class="sub-menu">
          @for (child of item.children; track child.label) {
          <li class="{{ child.children ? 'has-dropdown has-dropdown1' : '' }}">
            <a
              [routerLink]="child.link === '#' || !child.link ? [] : child.link"
            >
              {{ child.label }}
              @if (child.iconClass) {
              <span><i class="{{ child.iconClass }}"></i></span>
              }
            </a>

            @if (child.children) {
            <ul class="sub-menu">
              @for (subChild of child.children; track subChild.label) {
              <li>
                <a
                  [routerLink]="
                    subChild.link === '#' || !subChild.link ? [] : subChild.link
                  "
                >
                  {{ subChild.label }}
                </a>
              </li>
              }
            </ul>
            }
          </li>
          }
        </ul>
        }
      </li>
      }
    </ul>
  `,
  styles: ``,
})
export class NavListComponent {
  headerMenu: NavItem[] = [
    {
      label: 'Home',
      iconClass: 'fa-solid fa-angle-down',
      children: [
        {
          label: 'Multipage',
          link: '/multi/home-4',
          iconClass: 'fa-solid fa-angle-right',
          children: [
            { label: 'Home 1', link: '/multi/home-1' },
            { label: 'Home 2', link: '/multi/home-2' },
            { label: 'Home 3', link: '/multi/home-3' },
            { label: 'Home 4', link: '/multi/home-4' },
            { label: 'Home 5', link: '/multi/home-5' },
            { label: 'Home 6', link: '/multi/home-6' },
            { label: 'Home 7', link: '/multi/home-7' },
            { label: 'Home 8', link: '/multi/home-8' },
            { label: 'Home 9', link: '/multi/home-9' },
            { label: 'Home 10', link: '/multi/home-10' },
          ],
        },
        {
          label: 'Landing Page',
          link: '/multi/home-4',
          iconClass: 'fa-solid fa-angle-right',
          children: [
            { label: 'Home 1', link: '/single/home-1' },
            { label: 'Home 2', link: '/single/home-2' },
            { label: 'Home 3', link: '/single/home-3' },
            { label: 'Home 4', link: '/single/home-4' },
            { label: 'Home 5', link: '/single/home-5' },
            { label: 'Home 6', link: '/single/home-6' },
            { label: 'Home 7', link: '/single/home-7' },
            { label: 'Home 8', link: '/single/home-8' },
            { label: 'Home 9', link: '/single/home-9' },
            { label: 'Home 10', link: '/single/home-10' },
          ],
        },
      ],
    },
    { label: 'About Us', link: '/about' },
    {
      label: 'Service',
      iconClass: 'fa-solid fa-angle-down',
      children: [
        {
          label: 'Our Service',
          link: '/multi/home-4',
          iconClass: 'fa-solid fa-angle-right',
          children: [
            { label: 'Our Service 1', link: '/service' },
            { label: 'Our Service 2', link: '/service2' },
          ],
        },
        { label: 'Service Details', link: '/service-details' },
      ],
    },
    {
      label: 'Pages',
      iconClass: 'fa-solid fa-angle-down',
      children: [
        { label: 'Case Study', link: '/case' },
        { label: 'Case Details 1', link: '/case-details1' },
        { label: 'Case Details 2', link: '/case-details2' },
        { label: 'FAQ', link: '/faq' },
        { label: '404', link: '/error' },
      ],
    },
    {
      label: 'Shop',
      iconClass: 'fa-solid fa-angle-down',
      children: [
        {
          label: 'shop',
          link: '/shop',
          iconClass: 'fa-solid fa-angle-right',
          children: [
            { label: 'Shop', link: '/shop' },
            { label: 'Shop Left', link: '/shop-sidebar-left' },
            { label: 'Shop Right', link: '/shop-sidebar-right' },
          ],
        },
        {
          label: 'Others',
          link: '/shop',
          iconClass: 'fa-solid fa-angle-right',
          children: [
            { label: 'Cart', link: '/cart' },
            { label: 'Checkout', link: '/checkout' },
            { label: 'Account 1', link: '/account' },
            { label: 'Account 2', link: '/account2' },
          ],
        },
        { label: 'Shop Details', link: '/shop-details' },
      ],
    },
    {
      label: 'Blog',
      iconClass: 'fa-solid fa-angle-down',
      children: [
        {
          label: 'Blog',
          link: '/blog',
          iconClass: 'fa-solid fa-angle-right',
          children: [
            { label: 'Blog 1', link: '/blog' },
            { label: 'Blog 2', link: '/blog2' },
            { label: 'Blog Left', link: '/blog-sidebar-left' },
            { label: 'Blog Right', link: '/blog-sidebar-right' },
          ],
        },
        {
          label: 'Blog Details',
          link: '/blog',
          iconClass: 'fa-solid fa-angle-right',
          children: [
            { label: 'Details Left', link: '/blog-details-sidebar-left' },
            { label: 'Details Right', link: '/blog-details-sidebar-right' },
            { label: 'Single Details', link: '/blog-details' },
          ],
        },
      ],
    },
    { label: 'Contact Us', link: '/contact' },
  ];
}
