<template>
  <div
    id="sidenav-collapse-main"
    class="w-auto h-auto collapse navbar-collapse max-height-vh-100 h-100"
  >
    <ul class="navbar-nav">
      <!-- Render navigation items from data array -->
      <li
        v-for="item in navigationItems"
        :key="item.id"
        :class="{
          'nav-item': true,
          'mt-3': item.type === 'section-header',
        }"
      >
        <!-- Section Header -->
        <h6
          v-if="item.type === 'section-header'"
          class="text-xs ps-4 text-uppercase font-weight-bolder opacity-6"
          :class="isRTL ? 'me-4' : 'ms-2'"
        >
          {{ item.text }}
        </h6>

        <!-- Single Navigation Item -->
        <sidenav-item
          v-else-if="item.type === 'single'"
          :to="item.route"
          :mini-icon="item.miniIcon"
          :text="item.text"
        >
          <template #icon>
            <component :is="getIconComponent(item.icon)" />
          </template>
        </sidenav-item>

        <!-- Collapsible Navigation Item -->
        <sidenav-collapse
          v-else-if="item.type === 'collapse'"
          :collapse-ref="item.collapseRef"
          :nav-text="item.text"
          :class="isItemActive(item) ? 'active' : ''"
        >
          <template #icon>
            <component :is="getIconComponent(item.icon)" />
          </template>
          <template #list>
            <ul class="nav ms-4 ps-3">
              <sidenav-item
                v-for="subItem in item.children"
                :key="subItem.id"
                :to="subItem.route"
                :mini-icon="subItem.miniIcon"
                :text="subItem.text"
              />
            </ul>
          </template>
        </sidenav-collapse>
      </li>
    </ul>
  </div>
</template>

<script>
import SidenavItem from "./SidenavItem.vue";
import SidenavCollapse from "./SidenavCollapse.vue";

import Shop from "../../components/Icon/Shop.vue";
import Office from "../../components/Icon/Office.vue";

import { mapState } from "vuex";

export default {
  name: "SidenavList",
  components: {
    SidenavItem,
    SidenavCollapse,
    Shop,
    Office,
  },
  props: {
    cardBg: {
      type: String,
      default: "",
    },
  },
  computed: {
    ...mapState(["isRTL"]),

    // Navigation data structure
    navigationItems() {
      return [
        {
          id: "dashboard",
          type: "collapse",
          text: "Dashboards",
          icon: "Shop",
          collapseRef: "dashboardsExamples",
          children: [
            {
              id: "default",
              route: { name: "Default" },
              miniIcon: "D",
              text: "Default",
            },
            {
              id: "crm-dashboard",
              route: { name: "CRM" },
              miniIcon: "C",
              text: "CRM",
            },
          ],
        },
        {
          id: "agenda",
          type: "single",
          text: "Agenda",
          icon: "Office",
          miniIcon: "A",
          route: { name: "Agenda" },
        },
        {
          id: "courriel",
          type: "single",
          text: "Courriel",
          icon: "Office",
          miniIcon: "C",
          route: { name: "Courriel" },
        },
        {
          id: "contacts",
          type: "single",
          text: "Contacts",
          icon: "Office",
          miniIcon: "C",
          route: { name: "Gestion contacts" },
        },
        {
          id: "interventions",
          type: "single",
          text: "Interventions",
          icon: "Office",
          miniIcon: "I",
          route: { name: "Interventions" },
        },
        {
          id: "Defunts",
          type: "single",
          text: "Defunts",
          icon: "Office",
          miniIcon: "I",
          route: { name: "Defunts" },
        },
        {
          id: "gestion-section",
          type: "section-header",
          text: "GESTION",
        },
        {
          id: "clients",
          type: "collapse",
          text: "Clients",
          icon: "Office",
          collapseRef: "clientsMenu",
          routeKey: "clients",
          children: [
            {
              id: "clients-list",
              route: { name: "Gestion clients" },
              miniIcon: "C",
              text: "Clients",
            },
            {
              id: "clients-locations",
              route: { name: "Localisation clients" },
              miniIcon: "L",
              text: "Lieux",
            },
            {
              id: "clients-stats",
              route: { name: "Statistiques clients" },
              miniIcon: "S",
              text: "Statistiques",
            },
          ],
        },
        {
          id: "fournisseurs",
          type: "collapse",
          text: "Fournisseurs",
          icon: "Office",
          collapseRef: "fournisseursMenu",
          routeKey: "fournisseurs",
          children: [
            {
              id: "fournisseurs-list",
              route: { name: "Gestion fournisseurs" },
              miniIcon: "F",
              text: "Fournisseurs",
            },
            {
              id: "fournisseurs-orders",
              route: { name: "Commandes fournisseurs" },
              miniIcon: "C",
              text: "Commandes",
            },
            {
              id: "fournisseurs-invoices",
              route: { name: "Factures fournisseurs" },
              miniIcon: "F",
              text: "Factures",
            },
            {
              id: "fournisseurs-stats",
              route: { name: "Statistiques fournisseurs" },
              miniIcon: "S",
              text: "Statistiques",
            },
          ],
        },
        {
          id: "sous-traitants",
          type: "collapse",
          text: "Sous-Traitants",
          icon: "Office",
          collapseRef: "sousTraitantsMenu",
          routeKey: "sous-traitants",
          children: [
            {
              id: "sous-traitants-list",
              route: { name: "Gestion sous-traitants" },
              miniIcon: "S",
              text: "Sous-Traitants",
            },
            {
              id: "sous-traitants-orders",
              route: { name: "Commandes sous-traitants" },
              miniIcon: "C",
              text: "Commandes",
            },
            {
              id: "sous-traitants-invoices",
              route: { name: "Factures sous-traitants" },
              miniIcon: "F",
              text: "Factures",
            },
            {
              id: "sous-traitants-stats",
              route: { name: "Statistiques sous-traitants" },
              miniIcon: "S",
              text: "Statistiques",
            },
          ],
        },
        {
          id: "ventes",
          type: "collapse",
          text: "Ventes",
          icon: "Shop",
          collapseRef: "ventesMenu",
          routeKey: "ventes",
          children: [
            {
              id: "devis",
              route: { name: "Devis" },
              miniIcon: "D",
              text: "Devis",
            },
            {
              id: "factures-ventes",
              route: { name: "Factures ventes" },
              miniIcon: "F",
              text: "Factures",
            },
            {
              id: "ventes-stats",
              route: { name: "Statistiques ventes" },
              miniIcon: "S",
              text: "Statistiques",
            },
          ],
        },
        {
          id: "stock",
          type: "collapse",
          text: "Stock",
          icon: "Office",
          collapseRef: "stockMenu",
          routeKey: "stock",
          children: [
            {
              id: "produits",
              route: { name: "Gestion de produits" },
              miniIcon: "R",
              text: "Produits",
            },
            {
              id: "reception",
              route: { name: "Reception stock" },
              miniIcon: "R",
              text: "Réception",
            },
            {
              id: "stock-gestion",
              route: { name: "Gestion stock" },
              miniIcon: "S",
              text: "Stock",
            },
          ],
        },
        {
          id: "employes",
          type: "collapse",
          text: "Employés",
          icon: "Office",
          collapseRef: "employesMenu",
          routeKey: "employes",
          children: [
            {
              id: "employes-list",
              route: { name: "Gestion employes" },
              miniIcon: "E",
              text: "Employés",
            },
            {
              id: "employes-thanatopracteurs",
              route: { name: "Gestion thanatopractitioners" },
              miniIcon: "T",
              text: "Employés & Thanatopracteurs",
            },
            {
              id: "ndf",
              route: { name: "NDF" },
              miniIcon: "N",
              text: "NDF",
            },
            {
              id: "vehicules",
              route: { name: "Véhicules" },
              miniIcon: "V",
              text: "Véhicules",
            },
            {
              id: "absences",
              route: { name: "Absences" },
              miniIcon: "A",
              text: "Absences",
            },
          ],
        },
        {
          id: "parametrage",
          type: "collapse",
          text: "Paramétrage",
          icon: "Office",
          collapseRef: "parametrageMenu",
          routeKey: "parametrage",
          children: [
            {
              id: "droits",
              route: { name: "Gestion droits" },
              miniIcon: "D",
              text: "Gestion des droits",
            },
            {
              id: "emails",
              route: { name: "Gestion emails" },
              miniIcon: "E",
              text: "Gestion des emails",
            },
            {
              id: "modeles",
              route: { name: "Gestion modeles" },
              miniIcon: "M",
              text: "Gestion des modèles",
            },
            {
              id: "categories-produits",
              route: { name: "Product Categories" },
              miniIcon: "C",
              text: "Catégories Produits",
            },
          ],
        },
      ];
    },
  },
  methods: {
    getRoute() {
      const routeArr = this.$route.path.split("/");
      return routeArr[1];
    },

    getIconComponent(iconName) {
      const iconMap = {
        Shop: "Shop",
        Office: "Office",
      };
      return iconMap[iconName] || "Office";
    },

    isItemActive(item) {
      if (item.type === "collapse" && item.routeKey) {
        return this.getRoute() === item.routeKey;
      }
      return false;
    },
  },
};
</script>
