<template>
  <transition
    name="mm-notification-fade"
    @before-leave="setHeight">
    <div
      v-show="visible"
      :class="[type ? `mm-notification--${type}` : '']"
      class="mm-notification"
      @mouseenter="cancelAutoClose"
      @mouseleave="setUpAutoClose">
      <a
        class="mm-notification-target"
        @click.prevent="handleClick">
        <slot name="figure">
          <ui-icon
            v-if="icon"
            :name="icon"
            size="30px"
            class="mm-notification-icon"></ui-icon>
          <span
            v-if="iconEntity"
            v-html="iconEntity"></span>
        </slot>

        <div class="mm-media-body">
          <h2 v-if="title">
            {{ title }}
          </h2>
          <slot>
            <p
              v-if="messageIsHtml"
              v-html="message"></p>
            <p v-else>
              {{ message }}
            </p>
          </slot>
        </div>
      </a>
      <ui-icon
        v-if="closable"
        size="12px"
        name="close"
        class="mm-notification-close"
        @click.native.stop="handleClose"></ui-icon>
      <slot name="buttons">
        <div
          v-if="!closable && buttons && buttons.length"
          class="mm-notification-button-list">
          <div
            v-for="(item, index) of buttons"
            :key="index"
            class="mm-notification-button-item"
            @click="handleBtnClick(item)">
            {{ item.text }}
          </div>
        </div>
      </slot>
    </div>
  </transition>
</template>

<script>
import Icon from "../icon"

export default {
  name: "mm-notification",
  components: {
    "ui-icon": Icon,
  },
  data() {
    return {
      timer: null,
      visible: false,
      title: "",
      message: "",
      messageIsHtml: false,
      type: "",
      iconName: "",
      iconEntity: "",
      duration: 3,
      position: "top-right",
      closable: true,
      onClose: undefined,
      onClick: undefined,
      buttons: null,
    }
  },
  computed: {
    icon() {
      return this.type ? this.type : this.iconName || ""
    },
  },
  mounted() {
    this.setUpAutoClose()
  },
  methods: {
    setHeight() {
      this.$el.style.height = "0px"
      this.$el.style.marginTop = "0px"
    },
    setUpAutoClose() {
      if (typeof this.duration === "number" && this.duration > 0) {
        this.timer = setTimeout(this.destroy, this.duration * 1000)
      }
    },
    cancelAutoClose() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
    },
    destroy(manual = false) {
      if (typeof this.onClose === "function" && !manual) {
        this.onClose()
      }

      // ready for animate
      this.$el.style.height = `${this.$el.offsetHeight}px`
      this.$el.style.marginTop = `${window.getComputedStyle(this.$el).marginTop}px`

      this.$nextTick(() => {
        this.visible = false
        this.$el.addEventListener("transitionend", this.destroyElement)
      })
    },
    destroyElement() {
      this.$el.removeEventListener("transitionend", this.destroyElement)
      this.$el.remove()
      this.$destroy()
    },
    handleClick() {
      this.onClick && this.onClick(this)
    },
    handleClose() {
      this.cancelAutoClose()
      this.destroy()
    },
    close(manual) {
      this.cancelAutoClose()
      this.destroy(manual)
    },
    handleBtnClick(item) {
      item.onClick && item.onClick()
      this.handleClose()
    },
  },
}
</script>
