<template>
  <component
    :is="tag"
    :class="dropdownParent ? 'mm-dropdown-item' : 'mm-dropdown'">
    <div
      v-if="button"
      ref="reference">
      <ui-button-group
        class="mm-dropdown-button-group"
        :disabled="disabled">
        <ui-button
          :type="type"
          :native-type="nativeType"
          :size="size"
          :disabled="disabledButton"
          @click="buttonClick">
          <slot :action="{ show, hide }"></slot>
        </ui-button>
        <ui-button
          :type="type"
          :icon="icon"
          :icon-size="iconSize"
          :size="size"
          :disabled="disabledDropdown"
          v-on="popperListeners"></ui-button>
      </ui-button-group>
    </div>

    <div
      v-else
      ref="reference"
      class="mm-dropdown-trigger"
      v-on="popperListeners">
      <slot
        :visible="localVisible"
        :action="{ show, hide }"></slot>
    </div>

    <ui-popper
      v-if="!disabledDropdown"
      :visible.sync="localVisible"
      v-bind="$props"
      :transition="transition"
      class="mm-dropdown-popper"
      target="reference"
      @after-enter="$emit('after-enter')"
      @after-leave="$emit('after-leave')">
      <slot
        name="dropdown"
        :action="{ show, hide }"></slot>
    </ui-popper>
  </component>
</template>

<script>
import pick from "lodash/pick"
import omit from "lodash/omit"
import Popper from "../popper"
import ButtonGroup from "../button-group"
import Button from "../button"
import config from "../../managers/config"
import Tooltip from "../tooltip"

config.defaults({
  "Dropdown.visibleArrow": false,
  "Dropdown.hideOnClick": true,
})

const tooltipMixin = pick(Tooltip, [
  "mixins",
  "data",
  "computed",
  "watch",
  "methods",
])

export default {
  name: "mm-dropdown",
  components: {
    "ui-popper": Popper,
    "ui-button-group": ButtonGroup,
    "ui-button": Button,
  },
  mixins: [tooltipMixin],
  inheritAttrs: false,
  provide() {
    return {
      "mm-dropdown": this,
    }
  },
  inject: {
    dropdownParent: {
      from: "mm-dropdown",
      default: null,
    },
  },
  props: {
    ...omit(Popper.props, ["visible", "target", "trigger", "placement", "trackRefWidth"]),
    transition: {
      type: String,
      default: "zoom-in-top",
    },

    visibleArrow: {
      type: Boolean,
      default: () => config.get("Dropdown.visibleArrow"),
    },

    hideOnClick: {
      type: Boolean,
      default() {
        return this.dropdownParent ? this.dropdownParent.hideOnClick : config.get("Dropdown.hideOnClick")
      },
    },
    // buttonify
    button: {
      type: Boolean,
      default: false,
    },
    buttonClick: {
      type: Function,
      default() {},
    },
    size: {
      type: String,
    },
    icon: {
      type: String,
      default: "switch",
    },
    iconSize: {
      type: String,
      default: "14px",
    },
    nativeType: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    onClick: {
      type: Function,
      default: () => {},
    },
    type: {
      type: String,
    },
    placement: {
      type: String,
      default() {
        return this.button ? "bottom-end" : "bottom-start"
      },
    },
    trigger: {
      type: String,
      default: "click",
    },
    disabledDropdown: {
      type: Boolean,
      default: false,
    },
    disabledButton: {
      type: Boolean,
      default: false,
    },
    trackRefWidth: {
      type: Boolean,
      default() {
        return this.button
      },
    },
  },
  data() {
    return {
      isDropdown: true,
    }
  },
  computed: {
    tag() {
      return this.dropdownParent ? "li" : "div"
    },
  },
  watch: {
    localVisible(value) {
      this.$emit("visible-change", value)
    },
  },
  created() {
    this.$on("item-click", this.handleItemClick)
  },
  methods: {
    handleItemClick(event, item) {
      this.$emit("click", event, item.name, item)
      this.onClick(event, item.name, item)

      if (this.hideOnClick) {
        this.hide()

        if (this.dropdownParent && this.dropdownParent.hideOnClick) {
          this.dropdownParent.$emit("item-click", event, item)
        }
      }
    },
  },
}
</script>
