<template>
  <li
    :style="[paddingStyle, itemStyle, { backgroundColor }]"
    :class="{
      'mm-menu-item': true,
      'mm-menu-item--active': active,
      'mm-menu-item--disabled': disabled
    }"
    role="menuitem"
    tabindex="-1"
    @click="handleClick"
    @mouseenter="onMouseEnter"
    @focus="onMouseEnter"
    @blur="onMouseLeave"
    @mouseleave="onMouseLeave">
    <template v-if="parentMenu.$options.name === 'mm-menu' && rootMenu.collapse && $slots.title">
      <ui-tooltip
        class="mm-menu-tooltip"
        placement="right">
        <template slot="content">
          <slot name="title"></slot>
        </template>

        <span
          v-if="$slots.icon"
          class="mm-menu-icon">
          <slot name="icon"></slot>
        </span>
        <slot></slot>
      </ui-tooltip>
    </template>
    <template v-else>
      <span
        v-if="$slots.icon"
        class="mm-menu-icon">
        <slot name="icon"></slot>
      </span>
      <span
        v-if="$slots.title"
        class="mm-menu-title">
        <slot name="title"></slot>
      </span>
      <slot></slot>
    </template>
  </li>
</template>
<script>
import Menu from "./menu-mixin"
import Tooltip from "../tooltip"

export default {
  name: "mm-menu-item",

  components: {
    "ui-tooltip": Tooltip,
  },

  mixins: [Menu],

  props: {
    index: {
      type: String,
      required: true,
    },
    route: [String, Object],
    disabled: Boolean,
    routeable: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    active() {
      return this.index === this.rootMenu.activeIndex
    },
    hoverBackground() {
      return this.rootMenu.hoverBackground
    },
    backgroundColor() {
      return this.rootMenu.backgroundColor || ""
    },
    activeTextColor() {
      return this.rootMenu.activeTextColor || ""
    },
    textColor() {
      return this.rootMenu.textColor || ""
    },
    mode() {
      return this.rootMenu.mode
    },
    itemStyle() {
      const style = {
        color: this.active ? this.activeTextColor : this.textColor,
      }
      if (this.mode === "horizontal" && !this.isNested) {
        style.borderBottomColor = this.active
          ? this.rootMenu.activeTextColor
            ? this.activeTextColor
            : ""
          : "transparent"
      }
      return style
    },
    isNested() {
      return this.parentMenu !== this.rootMenu
    },
  },
  created() {
    this.parentMenu.addItem(this)
    this.rootMenu.addItem(this)
  },
  beforeDestroy() {
    this.parentMenu.removeItem(this)
    this.rootMenu.removeItem(this)
  },
  methods: {
    onMouseEnter() {
      if (this.mode === "horizontal" && !this.rootMenu.backgroundColor) {
        return
      }
      this.$el.style.backgroundColor = this.hoverBackground
    },
    onMouseLeave() {
      if (this.mode === "horizontal" && !this.rootMenu.backgroundColor) {
        return
      }
      this.$el.style.backgroundColor = this.backgroundColor
    },
    handleClick() {
      if (!this.disabled) {
        if (this.rootMenu) {
          this.rootMenu.$emit("item-click", this)
        }
        this.$emit("click", this)
      }
    },
  },
}
</script>
