<template>
  <li
    v-if="divider"
    :class="classes"
  />

  <li
    v-else 
    :class="classes"
    @click="onClick"
    @mouseenter="onMouseEnter"
    @mouseleave="onMouseLeave"
  >
    <slot />
  </li>
</template>

<script>
export default {
  inject: ['$$contextmenu'],
  props: {
    divider: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    autoHide: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      hover: false
    }
  },
  computed: {
    classes() {
      return this.divider 
        ? ['c-context-menu-divider']
        : {
          'c-context-menu-item': true,
          'c-context-menu-item--hover' : this.hover,
          'c-context-menu-item--disabled' : this.disabled
        }
    }
  },
  methods: {
    onClick(evt) {
      if (this.disabled) return

      this.$emit('click', this, evt)

      this.autoHide && this.$$contextmenu.hide()
    },
    onMouseEnter(evt) {
      if (this.disabled) return

      this.hover = true

      this.$emit('mouseenter', this, evt)
    },
    onMouseLeave(evt) {
      if (this.disabled) return

      this.hover = false

      this.$emit('mouseleave', this, evt)
    }
  }
}
</script>
