<template>
  <h-sub-menu v-if="!menu.meta?.hideInMenu" :key="menu.path">
    <template #icon>
      <h-icon
        v-if="menu.extra.iconName && menu.extra.iconName !== 'null'"
        :name="menu.extra.iconName"
        :color="menu.extra.iconColor"
        :key="menu.extra.iconName"
        width="16px"
        height="16px"
      ></h-icon>
      <span v-else></span>
    </template>
    <template #title>
      {{ t(menu.meta.title) }}
    </template>
    <template v-for="child in menu.children">
      <h-menu-item
        @mouseenter="$emit('itemHover', { key: child.path })"
        v-if="(!child.children || child.meta?.hideChildrenInMenu) && !child.meta?.hideInMenu"
        :key="child.path"
      >
        <template #icon>
          <lazy-icon
            v-if="child.meta.icon && child.meta.icon !== undefined"
            :icon="child.meta.icon"
            :iconColor="child.meta.iconColor"
            :key="child.meta.icon"
          />
          <lazy-icon
            v-else-if="collapsed && menu.meta.collapsedIcon !== undefined"
            :icon="menu.meta.collapsedIcon"
            :key="menu.meta.collapsedIcon"
          />
          <span v-else></span>
        </template>
        {{ t(child.meta.title) }}
      </h-menu-item>
      <template v-else>
        <sub-menu :menu="child" :key="child.path" :collapsed="collapsed" />
      </template>
    </template>
  </h-sub-menu>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';
import type { RouteProps } from '../typing';
import LazyIcon from './lazy-icon.vue';

export interface SubMenuProps {
  menu: RouteProps;
}

export default defineComponent({
  name: 'SubMenu',
  components: { LazyIcon },
  emits: ['itemHover'],
  props: {
    menu: {
      type: Object,
      required: true,
    },
    collapsed: {
      type: Boolean,
      default: false,
    },
  },
  setup() {
    const { t } = useI18n();
    return {
      t,
    };
  },
});
</script>

<style scoped></style>
