"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const shared_esmBundler = require("../../../../../@vue/shared/dist/shared.esm-bundler.js");
const icon = require("../../../utils/vue/icon.js");
const validator = require("../../../utils/vue/validator.js");
const index$8 = require("../../../hooks/use-draggable/index.js");
const index$9 = require("../../../hooks/use-lockscreen/index.js");
const index$a = require("../../../hooks/use-same-target/index.js");
const index$7 = require("../../../hooks/use-id/index.js");
const index = require("../../icon/index.js");
const index$3 = require("../../focus-trap/index.js");
const index$2 = require("../../input/index.js");
const useGlobalConfig = require("../../config-provider/src/hooks/use-global-config.js");
const index$4 = require("../../button/index.js");
const index$5 = require("../../../directives/trap-focus/index.js");
const index$1 = require("../../overlay/index.js");
const index$6 = require("../../../../../@element-plus/icons-vue/dist/index.js");
const Vue = require("vue");
var index_vue_vue_type_script_lang_default = Vue.defineComponent({
  name: "ElMessageBox",
  directives: { TrapFocus: index$5.default },
  components: {
    ElButton: index$4.ElButton,
    ElFocusTrap: index$3.default,
    ElInput: index$2.ElInput,
    ElOverlay: index$1.ElOverlay,
    ElIcon: index.ElIcon,
    ...icon.TypeComponents
  },
  inheritAttrs: false,
  props: {
    buttonSize: {
      type: String,
      validator: validator.isValidComponentSize
    },
    modal: {
      type: Boolean,
      default: true
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    closeOnHashChange: {
      type: Boolean,
      default: true
    },
    center: Boolean,
    draggable: Boolean,
    overflow: Boolean,
    roundButton: Boolean,
    container: {
      type: String,
      default: "body"
    },
    boxType: {
      type: String,
      default: ""
    }
  },
  emits: ["vanish", "action"],
  setup(props, { emit }) {
    const { locale, zIndex, ns, size: btnSize } = useGlobalConfig.useGlobalComponentSettings("message-box", Vue.computed(() => props.buttonSize));
    const { t } = locale;
    const { nextZIndex } = zIndex;
    const visible = Vue.ref(false);
    const state = Vue.reactive({
      autofocus: true,
      beforeClose: null,
      callback: null,
      cancelButtonText: "",
      cancelButtonClass: "",
      confirmButtonText: "",
      confirmButtonClass: "",
      cancelButtonType: "",
      confirmButtonType: "primary",
      customClass: "",
      customStyle: {},
      dangerouslyUseHTMLString: false,
      distinguishCancelAndClose: false,
      icon: "",
      closeIcon: "",
      inputPattern: null,
      inputPlaceholder: "",
      inputType: "text",
      inputValue: "",
      inputValidator: void 0,
      inputErrorMessage: "",
      message: "",
      modalFade: true,
      modalClass: "",
      showCancelButton: false,
      showConfirmButton: true,
      type: "",
      title: void 0,
      showInput: false,
      action: "",
      confirmButtonLoading: false,
      cancelButtonLoading: false,
      confirmButtonLoadingIcon: Vue.markRaw(index$6.Loading),
      cancelButtonLoadingIcon: Vue.markRaw(index$6.Loading),
      confirmButtonDisabled: false,
      editorErrorMessage: "",
      validateError: false,
      zIndex: nextZIndex()
    });
    const typeClass = Vue.computed(() => {
      const type = state.type;
      return { [ns.bm("icon", type)]: type && icon.TypeComponentsMap[type] };
    });
    const contentId = index$7.useId();
    const inputId = index$7.useId();
    const iconComponent = Vue.computed(() => {
      const type = state.type;
      return state.icon || type && icon.TypeComponentsMap[type] || "";
    });
    const hasMessage = Vue.computed(() => !!state.message);
    const rootRef = Vue.ref();
    const headerRef = Vue.ref();
    const focusStartRef = Vue.ref();
    const inputRef = Vue.ref();
    const confirmRef = Vue.ref();
    const confirmButtonClasses = Vue.computed(() => state.confirmButtonClass);
    Vue.watch(() => state.inputValue, async (val) => {
      await Vue.nextTick();
      if (props.boxType === "prompt" && val) validate();
    }, { immediate: true });
    Vue.watch(() => visible.value, (val) => {
      var _a;
      if (val) {
        if (props.boxType !== "prompt") if (state.autofocus) focusStartRef.value = ((_a = confirmRef.value) == null ? void 0 : _a.$el) ?? rootRef.value;
        else focusStartRef.value = rootRef.value;
        state.zIndex = nextZIndex();
      }
      if (props.boxType !== "prompt") return;
      if (val) Vue.nextTick().then(() => {
        if (inputRef.value && inputRef.value.$el) if (state.autofocus) focusStartRef.value = getInputElement() ?? rootRef.value;
        else focusStartRef.value = rootRef.value;
      });
      else {
        state.editorErrorMessage = "";
        state.validateError = false;
      }
    });
    const { isDragging } = index$8.useDraggable(rootRef, headerRef, Vue.computed(() => props.draggable), Vue.computed(() => props.overflow));
    Vue.onMounted(async () => {
      await Vue.nextTick();
      if (props.closeOnHashChange) window.addEventListener("hashchange", doClose);
    });
    Vue.onBeforeUnmount(() => {
      if (props.closeOnHashChange) window.removeEventListener("hashchange", doClose);
    });
    function doClose() {
      if (!visible.value) return;
      visible.value = false;
      Vue.nextTick(() => {
        if (state.action) emit("action", state.action);
      });
    }
    const handleWrapperClick = () => {
      if (props.closeOnClickModal) handleAction(state.distinguishCancelAndClose ? "close" : "cancel");
    };
    const overlayEvent = index$a.useSameTarget(handleWrapperClick);
    const handleInputEnter = (e) => {
      var _a;
      if (state.inputType !== "textarea" && !((_a = inputRef.value) == null ? void 0 : _a.isComposing)) {
        e.preventDefault();
        return handleAction("confirm");
      }
    };
    const handleAction = (action) => {
      var _a;
      if (props.boxType === "prompt" && action === "confirm" && !validate()) return;
      state.action = action;
      if (state.beforeClose) (_a = state.beforeClose) == null ? void 0 : _a.call(state, action, state, doClose);
      else doClose();
    };
    const validate = () => {
      if (props.boxType === "prompt") {
        const inputPattern = state.inputPattern;
        if (inputPattern && !inputPattern.test(state.inputValue || "")) {
          state.editorErrorMessage = state.inputErrorMessage || t("el.messagebox.error");
          state.validateError = true;
          return false;
        }
        const inputValidator = state.inputValidator;
        if (shared_esmBundler.isFunction(inputValidator)) {
          const validateResult = inputValidator(state.inputValue);
          if (validateResult === false) {
            state.editorErrorMessage = state.inputErrorMessage || t("el.messagebox.error");
            state.validateError = true;
            return false;
          }
          if (shared_esmBundler.isString(validateResult)) {
            state.editorErrorMessage = validateResult;
            state.validateError = true;
            return false;
          }
        }
      }
      state.editorErrorMessage = "";
      state.validateError = false;
      return true;
    };
    const getInputElement = () => {
      var _a;
      const inputRefs = (_a = inputRef.value) == null ? void 0 : _a.$refs;
      return (inputRefs == null ? void 0 : inputRefs.input) ?? (inputRefs == null ? void 0 : inputRefs.textarea);
    };
    const handleClose = () => {
      handleAction("close");
    };
    const onCloseRequested = () => {
      if (props.closeOnPressEscape) handleClose();
    };
    if (props.lockScroll) index$9.useLockscreen(visible, { ns });
    return {
      ...Vue.toRefs(state),
      ns,
      overlayEvent,
      visible,
      hasMessage,
      typeClass,
      contentId,
      inputId,
      btnSize,
      iconComponent,
      confirmButtonClasses,
      rootRef,
      focusStartRef,
      headerRef,
      inputRef,
      isDragging,
      confirmRef,
      doClose,
      handleClose,
      onCloseRequested,
      handleWrapperClick,
      handleInputEnter,
      handleAction,
      t
    };
  }
});
exports.default = index_vue_vue_type_script_lang_default;
