"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const aria = require("../../../constants/aria.js");
const event = require("../../../utils/dom/event.js");
const icon = require("../../../utils/vue/icon.js");
const index$1 = require("../../icon/index.js");
const useGlobalConfig = require("../../config-provider/src/hooks/use-global-config.js");
const notification = require("./notification.js");
const index = require("../../../../node_modules/@vueuse/core/index.js");
const Vue = require("vue");
const index$2 = require("../../../../node_modules/@vueuse/shared/index.js");
const _hoisted_1 = ["id"];
const _hoisted_2 = ["textContent"];
const _hoisted_3 = { key: 0 };
const _hoisted_4 = ["innerHTML"];
var notification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElNotification",
  __name: "notification",
  props: notification.notificationProps,
  emits: notification.notificationEmits,
  setup(__props, { expose: __expose }) {
    const props = __props;
    const { ns, zIndex } = useGlobalConfig.useGlobalComponentSettings("notification");
    const { nextZIndex, currentZIndex } = zIndex;
    const visible = Vue.ref(false);
    let timer = void 0;
    const typeClass = Vue.computed(() => {
      const type = props.type;
      return type && icon.TypeComponentsMap[props.type] ? ns.m(type) : "";
    });
    const iconComponent = Vue.computed(() => {
      if (!props.type) return props.icon;
      return icon.TypeComponentsMap[props.type] || props.icon;
    });
    const horizontalClass = Vue.computed(() => props.position.endsWith("right") ? "right" : "left");
    const verticalProperty = Vue.computed(() => props.position.startsWith("top") ? "top" : "bottom");
    const positionStyle = Vue.computed(() => {
      return {
        [verticalProperty.value]: `${props.offset}px`,
        zIndex: props.zIndex ?? currentZIndex.value
      };
    });
    function startTimer() {
      if (props.duration > 0) ({ stop: timer } = index$2.useTimeoutFn(() => {
        if (visible.value) close();
      }, props.duration));
    }
    function clearTimer() {
      timer == null ? void 0 : timer();
    }
    function close() {
      visible.value = false;
    }
    function onKeydown(event$1) {
      switch (event.getEventCode(event$1)) {
        case aria.EVENT_CODE.delete:
        case aria.EVENT_CODE.backspace:
          clearTimer();
          break;
        case aria.EVENT_CODE.esc:
          if (visible.value) close();
          break;
        default:
          startTimer();
          break;
      }
    }
    Vue.onMounted(() => {
      startTimer();
      nextZIndex();
      visible.value = true;
    });
    index.useEventListener(document, "keydown", onKeydown);
    __expose({
      visible,
      close
    });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createBlock(Vue.Transition, {
        name: Vue.unref(ns).b("fade"),
        onBeforeLeave: __props.onClose,
        onAfterLeave: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("destroy")),
        persisted: ""
      }, {
        default: Vue.withCtx(() => [Vue.withDirectives(Vue.createElementVNode("div", {
          id: __props.id,
          class: Vue.normalizeClass([
            Vue.unref(ns).b(),
            __props.customClass,
            horizontalClass.value
          ]),
          style: Vue.normalizeStyle(positionStyle.value),
          role: "alert",
          onMouseenter: clearTimer,
          onMouseleave: startTimer,
          onClick: _cache[0] || (_cache[0] = (...args) => __props.onClick && __props.onClick(...args))
        }, [iconComponent.value ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$1.ElIcon), {
          key: 0,
          class: Vue.normalizeClass([Vue.unref(ns).e("icon"), typeClass.value])
        }, {
          default: Vue.withCtx(() => [(Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(iconComponent.value)))]),
          _: 1
        }, 8, ["class"])) : Vue.createCommentVNode("v-if", true), Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(ns).e("group")) }, [
          Vue.createElementVNode("h2", {
            class: Vue.normalizeClass(Vue.unref(ns).e("title")),
            textContent: Vue.toDisplayString(__props.title)
          }, null, 10, _hoisted_2),
          Vue.withDirectives(Vue.createElementVNode("div", {
            class: Vue.normalizeClass(Vue.unref(ns).e("content")),
            style: Vue.normalizeStyle(!!__props.title ? void 0 : { margin: 0 })
          }, [Vue.renderSlot(_ctx.$slots, "default", {}, () => [!__props.dangerouslyUseHTMLString ? (Vue.openBlock(), Vue.createElementBlock("p", _hoisted_3, Vue.toDisplayString(__props.message), 1)) : (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 1 }, [Vue.createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "), Vue.createElementVNode("p", { innerHTML: __props.message }, null, 8, _hoisted_4)], 2112))])], 6), [[Vue.vShow, __props.message]]),
          __props.showClose ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$1.ElIcon), {
            key: 0,
            class: Vue.normalizeClass(Vue.unref(ns).e("closeBtn")),
            onClick: Vue.withModifiers(close, ["stop"])
          }, {
            default: Vue.withCtx(() => [(Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(__props.closeIcon)))]),
            _: 1
          }, 8, ["class"])) : Vue.createCommentVNode("v-if", true)
        ], 2)], 46, _hoisted_1), [[Vue.vShow, visible.value]])]),
        _: 3
      }, 8, ["name", "onBeforeLeave"]);
    };
  }
});
exports.default = notification_vue_vue_type_script_setup_true_lang_default;
