<script>
import { cond, equals, T } from 'ramda'
import { createIcons, icons } from "lucide";

export default {
  name: 'MenuItem',
  props: {
    type: {
      type: String,
      default: null
    },
    menuItem: {
      type: {
        line: String,
        icon: String,

      },
      default: () => ({
        link: "/"
      })
    },
    baseClass: {
      type: String,
      default: ""
    },
    routeName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {}
  },
  computed: {
    linkClass() {
      const menuRouterName = this.menuItem.router || ""
      if (menuRouterName === this.routeName)
        return `${this.baseClass} ${this.baseClass}--active`
      return this.baseClass
    },
    _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, nameAttr: "icon" })
    }
  }
}

</script>


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

