import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NgIcon, provideIcons } from '@ng-icons/core';
import {
  lucideChartPie,
  lucideEllipsis,
  lucideFolder,
  lucideFrame,
  lucideMap,
  lucideShare,
  lucideTrash2,
} from '@ng-icons/lucide';
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
import { HlmSidebarImports, HlmSidebarService } from '@spartan-ng/helm/sidebar';
import type { NavItem } from './types';

@Component({
  selector: 'app-nav-projects',
  imports: [HlmSidebarImports, NgIcon, RouterLink, HlmDropdownMenuImports],
  providers: [
    provideIcons({
      lucideFrame,
      lucideChartPie,
      lucideMap,
      lucideEllipsis,
      lucideFolder,
      lucideShare,
      lucideTrash2,
    }),
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <hlm-sidebar-group>
      <div hlmSidebarGroupLabel>{{ label() }}</div>
      <ul hlmSidebarMenu>
        @for (project of projects(); track project.title) {
          <li hlmSidebarMenuItem>
            <a
              [routerLink]="project.url"
              hlmSidebarMenuButton
              closeMobileSidebarOnClick
            >
              <ng-icon [name]="project.icon" />
              {{ project.title }}
            </a>
            <button
              [hlmDropdownMenuTrigger]="menu"
              [hlmDropdownMenuTriggerData]="{ $implicit: { project } }"
              [side]="_menuSide()"
              [align]="_menuAlign()"
              hlmSidebarMenuAction
              showOnHover
            >
              <ng-icon name="lucideEllipsis" />
              <span class="sr-only">More</span>
            </button>
          </li>
        }
        <li hlmSidebarMenuItem>
          <button hlmSidebarMenuButton>
            <ng-icon name="lucideEllipsis" />
            More
          </button>
        </li>
      </ul>
    </hlm-sidebar-group>

    <ng-template
      #menu
      let-ctx
    >
      <hlm-dropdown-menu class="w-48">
        <hlm-dropdown-menu-group>
          <hlm-dropdown-menu-label>{{ ctx.project.title }}</hlm-dropdown-menu-label>
        </hlm-dropdown-menu-group>
        <hlm-dropdown-menu-separator />
        <button hlmDropdownMenuItem>
          <ng-icon name="lucideFolder" />
          View Project
        </button>
        <button hlmDropdownMenuItem>
          <ng-icon name="lucideShare" />
          Share Project
        </button>
        <hlm-dropdown-menu-separator />
        <button hlmDropdownMenuItem>
          <ng-icon name="lucideTrash2" />
          Delete Project
        </button>
      </hlm-dropdown-menu>
    </ng-template>
  `,
})
export class NavProjects {
  private readonly _sidebarService = inject(HlmSidebarService);
  protected readonly _menuSide = computed(() =>
    this._sidebarService.isMobile() ? 'bottom' : 'right',
  );
  protected readonly _menuAlign = computed(() =>
    this._sidebarService.isMobile() ? 'end' : 'start',
  );

  // inputs
  readonly label = input.required<string>();
  readonly projects = input.required<NavItem[]>();
}
