<template>
  <div
    class="mm-popover">
    <div
      ref="reference"
      v-on="popperListeners">
      <slot></slot>
    </div>

    <ui-popper
      ref="popper"
      :visible.sync="localVisible"
      v-bind="popperProps"
      target="reference"
      class="mm-popover-popper"
      @after-enter="$emit('after-enter')"
      @after-leave="$emit('after-leave')">
      <slot
        v-if="title || $slots.title"
        name="title">
        <div class="mm-popover-title">
          {{ title }}
        </div>
      </slot>
      <slot
        v-if="content || $slots.content"
        name="content">
        <div class="mm-popover-content">
          {{ content }}
        </div>
      </slot>
    </ui-popper>
  </div>
</template>
<script>
import pick from "lodash/pick"
import Popper from "../popper"
import Tooltip from "../tooltip"

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

export default {
  name: "mm-popover",
  components: {
    "ui-popper": Popper,
  },
  mixins: [tooltipMixin],
  props: {
    title: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    /* eslint-disable vue/require-prop-types */
    trigger: {
      ...tooltipMixin.props.trigger,
      default: "click",
    },
  },
}
</script>
