import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BadgeModule } from 'primeng/badge';
import { OverlayBadgeModule } from 'primeng/overlaybadge';
import { RippleModule } from 'primeng/ripple';
import { StyleClassModule } from 'primeng/styleclass';
import { MyDirectiveModule } from '../../core/directives/my-directive.module';

@Component({
  selector: 'app-menu',
  standalone: true,
  imports: [
    CommonModule,
    StyleClassModule,
    RouterModule,
    MyDirectiveModule,
    RippleModule,
    BadgeModule,
    OverlayBadgeModule,
  ],
  template: `
    <ul class="list-none p-0 m-0">
      <li>
        <a
          pRipple
          routerLink="/dashboard"
          routerLinkActive="active-route"
          *appHasPrivilege="['DASHBOARD']"
          class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center text-surface-600 dark:text-surface-200 border-l-2 border-transparent hover:border-surface-300 dark:hover:border-surface-500 duration-150 transition-colors"
        >
          <i
            class="pi pi-home mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-2xl"
          ></i>
          <span class="font-medium inline text-base lg:text-xs lg:block"
            >Dashboard</span
          >
        </a>
      </li>
      <li>
        <a
          pRipple
          *appHasPrivilege="[
            'SOCI_ATTIVI_MESE',
            'CONTRIBUTI_RICHIESTE',
            'AUTORIZZAZIONI',
            'PRESE_CARICO',
            'PRESTAZIONI_RIMBORSI',
          ]"
          routerLink="/cruscotti"
          routerLinkActive="active-route"
          class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center text-surface-600 dark:text-surface-200 border-l-2 border-transparent hover:border-surface-300 dark:hover:border-surface-500 duration-150 transition-colors"
        >
          <i
            class="pi pi-search mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-2xl"
          ></i>
          <span class="font-medium inline text-base lg:text-xs lg:block"
            >Cruscotti</span
          >
        </a>
      </li>
      <li>
        <a
          pRipple
          *appHasPrivilege="['WELLFARE']"
          routerLink="/report"
          routerLinkActive="active-route"
          class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center text-surface-600 dark:text-surface-200 border-l-2 border-transparent hover:border-surface-300 dark:hover:border-surface-500 duration-150 transition-colors"
        >
          <i
            class="pi pi-chart-line mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-2xl"
            pBadge="3"
            severity="danger"
          ></i>
          <span class="font-medium inline text-base lg:text-xs lg:block"
            >Report</span
          >
        </a>
      </li>
      <li>
        <a
          pRipple
          routerLink="/utenti"
          *appHasPrivilege="['ACCOUNT_MANAGER']"
          routerLinkActive="active-route"
          class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center text-surface-600 dark:text-surface-200 border-l-2 border-transparent hover:border-surface-300 dark:hover:border-surface-500 duration-150 transition-colors"
        >
          <i
            class="pi pi-users mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-2xl"
          ></i>
          <span class="font-medium inline text-base lg:text-xs lg:block"
            >Utenti</span
          >
        </a>
      </li>
      <li>
        <a
          pRipple
          *appHasPrivilege="['ROLE_MANAGER']"
          routerLink="/ruoli"
          routerLinkActive="active-route"
          class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center text-surface-600 dark:text-surface-200 border-l-2 border-transparent hover:border-surface-300 dark:hover:border-surface-500 duration-150 transition-colors"
        >
          <i
            class="pi pi-users mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-2xl"
          ></i>
          <span class="font-medium inline text-base lg:text-xs lg:block"
            >Ruoli</span
          >
        </a>
      </li>
      <li>
        <a
          pRipple
          *appHasPrivilege="['NOMENCLATORE']"
          routerLink="/nomenclatore"
          routerLinkActive="active-route"
          class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center text-surface-600 dark:text-surface-200 border-l-2 border-transparent hover:border-surface-300 dark:hover:border-surface-500 duration-150 transition-colors"
        >
          <i
            class="pi pi-list mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-2xl"
          ></i>
          <span class="font-medium inline text-base lg:text-xs lg:block"
            >Nomenclatore</span
          >
        </a>
      </li>
      <li>
        <a
          pRipple
          *appHasPrivilege="['STRUTTURE']"
          routerLink="/strutture"
          routerLinkActive="active-route"
          class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center text-surface-600 dark:text-surface-200 border-l-2 border-transparent hover:border-surface-300 dark:hover:border-surface-500 duration-150 transition-colors"
        >
          <i
            class="pi pi-building mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-2xl"
          ></i>
          <span class="font-medium inline text-base lg:text-xs lg:block"
            >Strutture</span
          >
        </a>
      </li>

      <li>
        <a
          pRipple
          *appHasPrivilege="['CHIUSURE_AUTOMATICHE']"
          routerLink="/jobs"
          routerLinkActive="active-route"
          class="flex flex-row lg:flex-col items-center cursor-pointer p-4 lg:justify-center text-surface-600 dark:text-surface-200 border-l-2 border-transparent hover:border-surface-300 dark:hover:border-surface-500 duration-150 transition-colors"
        >
          <i
            class="pi pi-briefcase mr-2 lg:mr-0 mb-0 lg:mb-2 text-base lg:text-2xl"
          ></i>
          <span class="font-medium inline text-base lg:text-xs lg:block"
            >Jobs</span
          >
        </a>
      </li>
    </ul>
  `,
})
export class AppMenu {
  ngOnInit() {}
}
