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

export default {
  name: 'MenuItemGroup',
  components: {
    MenuItem
  },
  props: {
    type: {
      type: String,
      default: null
    },
    baseClass: {
      type: String,
      default: null
    },
    menuItem: {
      type: {
        show: String,
        children: Array,
        router: String
      },
      default: () => ({})
    },
    routeName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      open: false
    }
  },
  computed: {
    containerClass() {
      const routeName = this.routeName
      const menuRouterName = this.menuItem.router || ""
      if (menuRouterName === routeName) return `${this.baseClass} ${this.baseClass}--active`
      return `${this.baseClass}`
    },
    itemClass() {
      if (this.open) return `${this.baseClass}__sub-icon transform rotate-180`
      return `${this.baseClass}__sub-icon`
    },
    listClass() {
      if (this.open) return `${this.baseClass}__sub-open`
      return ""
    },
  },
  methods: {
    toggle() {
      this.open = !this.open
    }
  }
}

</script>


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