<!-- eslint-disable vue/prop-name-casing -->
<script>
import MenuItem from './MenuItemCopy.vue'

export default {
  name: 'MenuItemGroup',
  components: {
    MenuItem
  },
  props: {
    type: {
      type: String,
      default: null
    },
    base_class: {
      type: String,
      default: null
    },
    menu_item: {
      type: Object,
      default: () => ({})
    },
  },
  data() {
    return {
      open: false
    }
  },
  computed: {
    containerClass() {
      const menuRouterName = this.menu_item.router || ""
      const currentRouterName = this.$router.currentRoute._value.name || Math.random()
      if (menuRouterName === currentRouterName) return `${this.base_class} ${this.base_class}--active`
      return `${this.base_class}`
    },
    itemClass() {
      if (this.open) return `${this.base_class}__sub-icon transform rotate-180`
      return `${this.base_class}__sub-icon`
    },
    listClass() {
      if (this.open) return `${this.base_class}__sub-open`
      return ""
    },
    menu_list_with_index() {
      return this.menu_item.children.map((el, index) => ({...el, index}))
    }
  },
  methods: {
    toggle() {
      this.open = !this.open
    }
  }
}

</script>


<template>
  <li>
    <span
      :class="containerClass"
      @click="toggle"
    >
      <div :class="`${base_class}__icon`"> <i :icon="menu_item.icon" /> </div>
      <div :class="`${base_class}__title`">
        {{ menu_item.show }}
        <div :class="itemClass"> <i icon="chevron-down" /> </div>
      </div>
    </span>
    <ul :class="listClass">
      <MenuItem
        v-for="item in menu_item.children"
        :key="JSON.stringify(item)"
        :base_class="base_class"
        :type="item.type"
        :menu_item="item"
      />
    </ul>
  </li>
</template>
