import { reactive, computed, watch, h } from "vue";
import { defineVxeComponent } from "../../ui/src/comp.mjs";
import "../../ui/index.mjs";
import { getSlotVNs } from "../../ui/src/vn.mjs";
import XEUtils from "xe-utils";
import { getI18n } from "../../../../@vxe-ui/core/es/src/i18n.mjs";
import { getConfig } from "../../../../@vxe-ui/core/es/src/config.mjs";
import { useSize } from "../../../../@vxe-ui/core/es/src/useFns.mjs";
import { getIcon } from "../../../../@vxe-ui/core/es/src/icon.mjs";
import { createEvent } from "../../../../@vxe-ui/core/es/src/event.mjs";
import { renderEmptyElement } from "../../../../@vxe-ui/core/es/index.esm.mjs";
const VxeLoadingComponent = defineVxeComponent({
  name: "VxeLoading",
  props: {
    modelValue: Boolean,
    icon: {
      type: String,
      default: () => getConfig().loading.icon
    },
    showIcon: {
      type: Boolean,
      default: () => getConfig().loading.showIcon
    },
    text: {
      type: String,
      default: () => getConfig().loading.text
    },
    showText: {
      type: Boolean,
      default: () => getConfig().loading.showText
    },
    status: String,
    size: {
      type: String,
      default: () => getConfig().loading.size || getConfig().size
    }
  },
  setup(props, context) {
    const { slots, emit } = context;
    const xID = XEUtils.uniqueId();
    const { computeSize } = useSize(props);
    const reactData = reactive({
      initialized: false
    });
    const computeMaps = {
      computeSize
    };
    const $xeLoading = {
      xID,
      props,
      context,
      reactData,
      getComputeMaps: () => computeMaps
    };
    const computeLoadingIcon = computed(() => {
      return props.icon || getIcon().LOADING;
    });
    const computeLoadingText = computed(() => {
      const { text } = props;
      return XEUtils.isString(text) ? text : getI18n("vxe.loading.text");
    });
    const handleInit = () => {
      if (!reactData.initialized) {
        reactData.initialized = !!reactData.initialized;
      }
    };
    const dispatchEvent = (type, params, evnt) => {
      emit(type, createEvent(evnt, { $loading: $xeLoading }, params));
    };
    const loadingMethods = {
      dispatchEvent
    };
    const loadingPrivateMethods = {};
    Object.assign($xeLoading, loadingMethods, loadingPrivateMethods);
    const renderVN = () => {
      const { modelValue, showIcon, status } = props;
      const { initialized } = reactData;
      const vSize = computeSize.value;
      const defaultSlot = slots.default;
      const textSlot = slots.text;
      const iconSlot = slots.icon;
      const loadingIcon = computeLoadingIcon.value;
      const loadingText = computeLoadingText.value;
      if (!initialized && !modelValue) {
        return renderEmptyElement();
      }
      return h("div", {
        class: ["vxe-loading", {
          [`size--${vSize}`]: vSize,
          [`theme--${status}`]: status,
          "is--visible": modelValue
        }]
      }, defaultSlot ? [
        h("div", {
          class: "vxe-loading--wrapper"
        }, getSlotVNs(defaultSlot({})))
      ] : [
        h("div", {
          class: "vxe-loading--chunk"
        }, [
          showIcon && (iconSlot || loadingIcon) ? h("div", {
            class: "vxe-loading--icon"
          }, iconSlot ? getSlotVNs(iconSlot({})) : [
            h("i", {
              class: loadingIcon
            })
          ]) : h("div", {
            class: "vxe-loading--spinner"
          }),
          textSlot || loadingText ? h("div", {
            class: "vxe-loading--text"
          }, textSlot ? getSlotVNs(textSlot({})) : `${loadingText}`) : null
        ])
      ]);
    };
    watch(() => props.modelValue, () => {
      handleInit();
    });
    handleInit();
    $xeLoading.renderVN = renderVN;
    return $xeLoading;
  },
  render() {
    return this.renderVN();
  }
});
export {
  VxeLoadingComponent as default
};
