<!-- eslint-disable vue/prop-name-casing -->
<script>
import { cond, equals, T, always } from 'ramda'
import { createIcons, icons } from "lucide";
import MenuItemGroup from './MenuItemGroup.vue'

export default {
  name: 'MenuItem',
  components: {MenuItemGroup},
  props: {
    type: {
      type: String,
      default: null
    },
    menu_item: {
      type: Object,
      default: () => ({
        link: "/"
      })
    },
    base_class: {
      type: String,
      default: ""
    },
    routeName: {
      type: String,
      default: ""
    }
  },
  data() {
  },
  computed: {
    _base_class() {
      return `${this.base_class}`
    },
    activeClass () {
      return 'side-menu side-menu--active'
    },
    menuRouterName() {
      return this.menu_item.router || ""
    },
    currentRouterName() {
      return this.$router.currentRoute._value.name || ""
    },
    linkClass() {
      const menuRouterName = this.menu_item.router || ""
      if (menuRouterName === this.routeName)
        return `${this._base_class} ${this._base_class}--active`
      return this._base_class
    },
    _type() {
      return cond([
        [equals("simple_link"), (x) => x],
        [equals("line"), (x) => x],
        [equals("group"), (x) => x],
        [T, () => "other"],
      ])(this.type)
    }
  },
  mounted() {
    this.icons()
  },
  updated() {
    console.log(123)

    this.icons()
  },
  methods: {
    icons() {
      createIcons({ icons, "stroke-width": 1.5, nameAttr: "icon" })
    }
  }
}

</script>


<template>
  <li v-if="_type == 'simple_link'">
    <router-link
      phx-hook="MenuLink"
      :class="linkClass"
      :to="menu_item.link"
    >
      <div :class="`${_base_class}__icon`">
        <i :icon="menu_item?.icon" />
      </div>
      <div :class="`${_base_class}__title`">
        {{ menu_item.show }}
      </div>
    </router-link>
  </li>
  <li v-if="_type == 'line'">
    <hr class="m-4">
  </li>
  <MenuItemGroup
    v-if="_type == 'group'"
    :type="_type"
    :base_class="base_class"
    :menu_item="menu_item"
  />
  <div v-if="_type == 'other'">
    ""
  </div>
</template>


<!-- <router-link
v-if="type === 'link'"
class="flex p-2 rounded-md hover:bg-gray-100 flex items-center"
:class="{'bg-gray-200': pageName === name}"
:to="link"
>
<i :class="`ri-${icon} text-slate-600 mr-2 `" />
<span
  v-if="isOpenMenu"
  class="text-slate-700"
>{{ title }}</span>
</router-link> -->
