<template>
  <section class="o-navi-expansion-item">
    <q-expansion-item class="dense" :class="`level-${level}`"
                      :header-class="{ 'root': root, 'header-item': true }"
                      :header-style="{ 'paddingLeft': `${(level-1)*30}px` }"
                      :default-opened="!data.meta?.collapse && !collapse"
                      :expand-icon-toggle="root"
                      v-if="data.children?.length">
      <template v-slot:header>
        <o-navi-icon :meta="data.meta" />
        <q-item-section class="text-info title">
          <q-item-label lines="1">
            {{ menuLabel(data.name) }}
          </q-item-label>
        </q-item-section>
      </template>
      <q-separator class="bg-accent" v-if="separator" />
      <slot></slot>

      <template v-for="(item, index) of data.children" :key="`${data.name}-${index}`">
        <section v-if="!item.meta?.hidden">
          <o-navi-expansion-item v-if="item.children && item.children.length > 0"
                                 :parent-key="`${parentKey}-${item.name}`"
                                 :level="level+1"
                                 :data="item" />
          <o-navi-item class="data-item"
                       :class="{'active': isActive(item)}"
                       :style="`padding-left: ${ level > 0 ? (level)*40 - (level-1)*10 : 0}px`"
                       :item="item"
                       :showItemIcon="showItemIcon"
                       v-else />
        </section>
      </template>
    </q-expansion-item>
    <o-navi-item class="data-item"
                 :class="{'active': isActive(data)}"
                 :item="data"
                 :show-item-icon="showItemIcon"
                 v-else />
  </section>
</template>

<script setup lang="ts">
import type { PropType} from 'vue'
import { computed, defineAsyncComponent } from 'vue'

import ONaviIcon from 'core/components/navi/ONaviIcon.vue'
import ONaviItem from 'core/components/navi/ONaviItem.vue'
import type { MenuItem } from 'core/types/menu'
import { menuLabel } from 'core/hooks/useMenu'
import { useNaviStore } from 'stores/navi'

const props = defineProps({
  root: { type: Boolean, default: false },
  level: { type: Number, default: 0 },
  parentKey: { type: String, default: '' },
  data: {
    type: Object as PropType<MenuItem>,
    default: () => {
      return {}
    }
  },
  separator: { type: Boolean, default: false },
  collapse: { type: Boolean, default: false },
  showItemIcon: { type: Boolean, default: false },
})

defineAsyncComponent(() =>
  import('core/components/navi/ONaviExpansionItem.vue')
)

const naviStore = useNaviStore()

const currentMenu = computed(() => naviStore.currentMenu)

function isActive(item: MenuItem) {
  return currentMenu.value?.id === item?.id
    || currentMenu.value?.parentId === item?.id
}
</script>

<style lang="scss">
.o-navi-expansion-item {
  .separator {
    padding: 0 12px;
    margin: 16px 0 4px 0;
    opacity: 0.3;
  }

  .q-item {
    //padding: 0 10px 0 0;
    &.root {
      .q-item__section--main {
        padding: 0 !important;
      }
      .q-item__section--side {
        display: none;
      }
    }

    .q-icon {
      font-size: 1.4rem;
    }

    .item-label {
      .q-badge {
        font-size: 8px;
        padding: 2px 2px 0 2px;
        margin-left: 4px;
        border-radius: 2px;
        line-height: unset;
        min-height: unset !important;
        vertical-align: middle;
      }
    }
  }
}
</style>
