<template>
  <section :class="{
    'hn-side-menu__tree--root': isRoot,
    'hn-side-menu__tree--node': !isRoot && !isLeaf,
    'hn-side-menu__tree--leaf': !isRoot && isLeaf,
  }">
    <template v-for="({
        icon, [`${textKey}`]: text, disabled, [`${submenuKey}`]: submenu
      }, path) in menu">
      <hn-side-submenu
        v-if="submenu"
        :key="path"
        :disabled="disabled"
        :index="`${prefix}/${path}`">
        <template slot="title">
          <i v-if="icon"
            class="hn-side-submenu__title-icon"
            :class="icon"/>
          <span v-if="text"
            class="hn-side-submenu__title-text">
            {{ text }}
          </span>
        </template>
        <hn-side-menu-tree
          :is-root="false"
          :menu="submenu"
          :text-key="textKey"
          :submenu-key="submenuKey"
          :prefix="`${prefix}/${path}`" />
      </hn-side-submenu>
      <hn-side-menu-item
        v-else
        :key="path"
        :disabled="disabled"
        :index="`${prefix}/${path}`">
        <i v-if="icon"
          class="hn-side-menu-item__title-icon"
          :class="icon" />
        <template slot="title">
          <span v-if="text"
            class="hn-side-menu-item__title-text">
            {{ text }}
          </span>
        </template>
      </hn-side-menu-item>
    </template>
  </section>
</template>
<script>
import HnSideMenuTree from './side-menu-tree.vue';
import HnSideSubmenu from './side-submenu.vue';
import HnSideMenuItem from './side-menu-item.vue';

export default {
  name: 'HnSideMenuTree',
  inheritAttrs: false,
  props: {
    isRoot: {
      type: Boolean,
      default: true
    },
    menu: {
      type: Object,
      default: null
    },
    prefix: {
      type: String,
      default: ''
    },
    textKey: {
      type: String,
      require: true
    },
    submenuKey: {
      type: String,
      require: true
    }
  },
  components: {
    HnSideMenuTree,
    HnSideSubmenu,
    HnSideMenuItem
  },
  computed: {
    isLeaf() {
      return Object.keys(this.menu).every(i => !this.menu[i].submenu);
    }
  }
};
</script>
