<script setup lang="ts">
import { computed } from 'vue';
import { useLayoutStore } from '@KTXC/stores/layoutStore';
import { useIntegrationStore } from '@KTXC/stores/integrationStore';
import Logo from '@KTXC/layouts/logo/LogoDark.vue';
import SystemMenuGroupStatic from './LayoutSystemMenuGroupStatic.vue';
import SystemMenuGroupDynamic from './LayoutSystemMenuGroupDynamic.vue';
import SystemMenuItem from './LayoutSystemMenuItem.vue';

const layoutStore = useLayoutStore();
const integrationStore = useIntegrationStore();

// Get all entries based on current menu mode
const menuEntries = computed(() => {
  switch (layoutStore.menuMode) {
    case 'user-settings':
      return integrationStore.getPoint('user_settings_menu');
    case 'admin-settings':
      return integrationStore.getPoint('admin_settings_menu');
    case 'apps':
    default:
      return integrationStore.getPoint('app_menu');
  }
});

// Menu mode display info
const menuModeInfo = computed(() => {
  switch (layoutStore.menuMode) {
    case 'user-settings':
      return {
        icon: 'mdi-account-cog',
        label: 'Personal Settings',
        toggleLabel: 'Admin',
        toggleIcon: 'mdi-shield-crown',
      };
    case 'admin-settings':
      return {
        icon: 'mdi-shield-crown',
        label: 'Administration',
        toggleLabel: 'Apps',
        toggleIcon: 'mdi-view-dashboard',
      };
    case 'apps':
    default:
      return {
        icon: 'mdi-view-dashboard',
        label: 'Applications',
        toggleLabel: 'Settings',
        toggleIcon: 'mdi-account-cog',
      };
  }
});
</script>

<script lang="ts">
export default {
  methods: {
  }
};
</script>

<template>
  <v-navigation-drawer
    left
    v-model="layoutStore.sidebarDrawer"
    elevation="0"
    rail-width="60"
    mobile-breakpoint="lg"
    app
    class="leftSidebar"
    :rail="layoutStore.miniSidebar"
    expand-on-hover
  >
    <div class="pa-5">
      <Logo />
    </div>
    <!-- ---------------------------------------------- -->
    <!---Navigation -->
    <!-- ---------------------------------------------- -->
    <perfect-scrollbar class="scrollnavbar">
      <v-list aria-busy="true" aria-label="menu list">
        <!---Menu Loop -->
        <template v-for="entry in menuEntries" :key="entry.id">
          <!-- Group with dynamic style (collapsible) -->
          <SystemMenuGroupDynamic 
            v-if="'items' in entry && entry.style === 'dynamic'" 
            class="leftPadding" 
            :group="entry" 
          />
          <!-- Group with static style (subheader) -->
          <SystemMenuGroupStatic 
            v-else-if="'items' in entry" 
            :group="entry" 
          />
          <!-- Single item (no group) -->
          <SystemMenuItem 
            v-else 
            :item="entry" 
          />
        </template>
      </v-list>
    </perfect-scrollbar>
    
    <!-- Menu Mode Toggle -->
    <template v-slot:append>
      <v-divider />
      <v-list density="compact" class="pa-2">
        <v-list-item
          rounded
          color="primary"
          @click="layoutStore.toggleMenuMode()"
          :prepend-icon="menuModeInfo.toggleIcon"
          class="menu-mode-toggle"
        >
          <v-list-item-title class="text-body-2">{{ menuModeInfo.toggleLabel }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </template>
  </v-navigation-drawer>
</template>
