<template>
  <UDashboardGroup unit="rem">
    <UDashboardSidebar
      v-model:open="isSidebarOpen"
      v-model:collapsed="isSidebarCollapsed"
      :ui="{ root: 'bg-elevated/25', footer: 'lg:border-t lg:border-default' }"
      collapsible
    >
      <template #header="{ collapsed }">
        <slot name="logotype" :collapsed="collapsed">
          <NuxtLink :to="homeLink" class="flex items-center gap-2.5" :class="collapsed && 'mx-auto'">
            <UIcon v-if="logotypeIcon && logotypeShortIcon" :name="collapsed ? logotypeShortIcon : logotypeIcon" />

            <template v-if="version">
              <UBadge
                v-show="!collapsed"
                color="primary"
                variant="soft"
                size="sm"
                :label="version"
              />
            </template>
          </NuxtLink>
        </slot>
      </template>

      <template #default="{ collapsed }">
        <UNavigationMenu
          :collapsed="collapsed"
          :items="navigation"
          orientation="vertical"
          tooltip
          popover
        />

        <UNavigationMenu
          :collapsed="collapsed"
          :items="links"
          orientation="vertical"
          tooltip
          class="mt-auto"
        />
      </template>

      <template v-if="$slots.footer" #footer="{ collapsed }">
        <div class="my-1 w-full">
          <slot name="footer" :collapsed="collapsed" />
        </div>
      </template>
    </UDashboardSidebar>

    <slot />
  </UDashboardGroup>
</template>

<script setup>
import { useAppConfig } from "#imports";
import { computed } from "vue";
import { useAdmin } from "../composables/useAdmin";
const props = defineProps({
  navigation: { type: Array, required: true },
  links: { type: Array, required: false },
  version: { type: String, required: false },
  logotype: { type: String, required: false },
  logotypeIcon: { type: String, required: false },
  logotypeShortIcon: { type: String, required: false },
  homeLink: { type: null, required: false }
});
defineSlots();
const appConfig = useAppConfig();
const { isSidebarOpen, isSidebarCollapsed } = useAdmin();
const links = computed(() => [
  ...props.links || [],
  {
    label: isSidebarCollapsed.value ? "\u0420\u0430\u0437\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u043C\u0435\u043D\u044E" : "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u043C\u0435\u043D\u044E",
    icon: isSidebarCollapsed.value ? appConfig.ui.icons.panelClose : appConfig.ui.icons.panelOpen,
    onSelect: () => {
      isSidebarCollapsed.value = !isSidebarCollapsed.value;
    }
  }
]);
</script>
