<template>
  <va-sidebar :width="width" :minimized="minimized" :minimized-width="minimizedWidth" :animated="animated">
    <menu-minimized v-if="minimized" :items="items" />
    <menu-accordion v-else :items="items" />
  </va-sidebar>
</template>

<script setup lang="ts">
  import { ref, getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance()
  const { $api } = proxy
  import NavigationRoutes from './NavigationRoutes'
  import MenuAccordion from './menu/MenuAccordion.vue'
  import MenuMinimized from './menu/MenuMinimized.vue'
  function removeChildren(obj) {
    if (obj.children.length == 0) {
      delete obj.children
    } else {
      obj.children.forEach((x) => {
        removeChildren(x)
      })
    }
  }
  withDefaults(
    defineProps<{
      width?: string
      color?: string
      animated?: boolean
      minimized?: boolean
      minimizedWidth?: string
    }>(),
    {
      width: '16rem',
      color: 'secondary',
      animated: true,
      minimized: true,
      minimizedWidth: undefined,
    },
  )
  // const items = ref(NavigationRoutes.routes)
  const items = ref([])
  $api.getMenuPermission().then((res) => {
    res.result.forEach((x) => {
      removeChildren(x)
    })
    items.value = res.result
  })
</script>

<style lang="scss">
  .va-sidebar {
    &__menu {
      padding: 2rem 0;
    }

    &-item {
      &__icon {
        width: 1.5rem;
        height: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
