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

export default {
  name: 'MenuItemCopy',
  components: {},
  props: {
    type: {
      type: String,
      default: null
    },
    menu_item: {
      type: Object,
      default: () => ({
        link: "/"
      })
    },
    base_class: {
      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 || ""
      const currentRouterName = this.$router.currentRoute._value.name || Math.random()
      if (menuRouterName === currentRouterName)
      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() {
    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>
  <div v-if="_type == 'other'">
    ""
  </div>
</template>
