import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, watch, onUnmounted, Transition, ref, nextTick, unref, onMounted, Teleport, h, render } from "vue";
import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
const modalProps = {
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ""
  },
  lockScroll: {
    type: Boolean,
    default: true
  },
  closeOnClickOverlay: {
    type: Boolean,
    default: true
  },
  beforeClose: {
    type: Function
  },
  escapable: {
    type: Boolean,
    default: true
  },
  showClose: {
    type: Boolean,
    default: true
  },
  showOverlay: {
    type: Boolean,
    default: true
  },
  appendToBody: {
    type: Boolean,
    default: true
  }
};
const DEFAULT_PREFIX = "icon";
const iconProps = {
  name: {
    type: String,
    default: "",
    required: true
  },
  size: {
    type: [Number, String],
    default: "inherit"
  },
  color: {
    type: String,
    default: "inherit"
  },
  component: {
    type: Object,
    default: null
  },
  classPrefix: {
    type: String,
    default: DEFAULT_PREFIX
  },
  operable: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  rotate: {
    type: [Number, String]
  }
};
const svgIconProps = {
  name: {
    type: String,
    default: "",
    required: true
  },
  color: {
    type: String,
    default: "inherit"
  },
  size: {
    type: [Number, String],
    default: "inherit"
  }
};
function createBem(namespace, element, modifier) {
  let cls = namespace;
  if (element) {
    cls += `__${element}`;
  }
  if (modifier) {
    cls += `--${modifier}`;
  }
  return cls;
}
function useNamespace(block, needDot = false) {
  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
  const b = () => createBem(namespace);
  const e = (element) => element ? createBem(namespace, element) : "";
  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
  return {
    b,
    e,
    m,
    em
  };
}
var icon = "";
var svgIcon = defineComponent({
  name: "DSvgIcon",
  props: svgIconProps,
  setup(props) {
    const {
      name,
      color,
      size
    } = toRefs(props);
    const ns = useNamespace("svg-icon");
    const iconName = computed(() => `#icon-${name.value}`);
    const iconSize = computed(() => {
      return typeof size.value === "number" ? `${size.value}px` : size.value;
    });
    const styles = {
      width: iconSize.value,
      height: iconSize.value
    };
    return () => {
      return createVNode("svg", {
        "class": ns.b(),
        "style": styles
      }, [createVNode("use", {
        "xlink:href": iconName.value,
        "fill": color.value
      }, null)]);
    };
  }
});
function isUrl(value) {
  return /^((http|https):)?\/\//.test(value);
}
function useIconDom(props, ctx) {
  const {
    component,
    name,
    size,
    color,
    classPrefix,
    rotate
  } = toRefs(props);
  const ns = useNamespace("icon");
  const iconSize = computed(() => {
    return typeof size.value === "number" ? `${size.value}px` : size.value;
  });
  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
  const imgIconDom = () => {
    return createVNode("img", mergeProps({
      "src": name.value,
      "alt": name.value.split("/")[name.value.split("/").length - 1],
      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
      "style": {
        width: iconSize.value || "",
        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
        verticalAlign: "middle"
      }
    }, ctx.attrs), null);
  };
  const svgIconDom = () => {
    return createVNode(IconComponent, mergeProps({
      "name": name.value,
      "color": color.value,
      "size": iconSize.value,
      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
      "style": {
        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
      }
    }, ctx.attrs), null);
  };
  const fontIconDom = () => {
    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
    return createVNode("i", mergeProps({
      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
      "style": {
        fontSize: iconSize.value,
        color: color.value,
        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
      }
    }, ctx.attrs), null);
  };
  const iconDom = () => {
    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
  };
  return {
    iconDom
  };
}
var Icon = defineComponent({
  name: "DIcon",
  props: iconProps,
  emits: ["click"],
  setup(props, ctx) {
    const {
      disabled,
      operable
    } = toRefs(props);
    const {
      iconDom
    } = useIconDom(props, ctx);
    const ns = useNamespace("icon");
    const wrapClassed = computed(() => ({
      [ns.e("container")]: true,
      [ns.m("disabled")]: disabled.value,
      [ns.m("operable")]: operable.value
    }));
    const onClick = (e) => {
      if (disabled.value) {
        return;
      }
      ctx.emit("click", e);
    };
    return () => {
      var _a, _b, _c, _d;
      return createVNode("div", {
        "class": wrapClassed.value,
        "onClick": onClick
      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
    };
  }
});
var iconGroup = "";
defineComponent({
  name: "DIconGroup",
  setup(_, ctx) {
    const ns = useNamespace("icon-group");
    return () => {
      var _a, _b;
      return createVNode("div", {
        "class": ns.b()
      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
    };
  }
});
const fixedOverlayProps = {
  modelValue: {
    type: Boolean,
    default: false
  },
  lockScroll: {
    type: Boolean,
    default: true
  },
  closeOnClickOverlay: {
    type: Boolean,
    default: true
  }
};
function lockScroll() {
  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
    const scrollTop = document.documentElement.scrollTop;
    const style = document.documentElement.getAttribute("style");
    document.documentElement.style.position = "fixed";
    document.documentElement.style.top = `-${scrollTop}px`;
    document.documentElement.style.width = document.documentElement.style.width || "100%";
    document.documentElement.style.overflowY = "scroll";
    return () => {
      if (style) {
        document.documentElement.setAttribute("style", style);
      } else {
        document.documentElement.removeAttribute("style");
      }
      document.documentElement.scrollTop = scrollTop;
    };
  }
  return;
}
function useFixedOverlay(props, ctx) {
  let lockScrollCb;
  const onClick = (event) => {
    event.preventDefault();
    ctx.emit("click", event);
    if (props.closeOnClickOverlay) {
      ctx.emit("update:modelValue", false);
    }
  };
  const removeBodyAdditions = () => {
    lockScrollCb == null ? void 0 : lockScrollCb();
  };
  watch(() => props.modelValue, (val) => {
    if (val) {
      props.lockScroll && (lockScrollCb = lockScroll());
    } else {
      removeBodyAdditions();
    }
  });
  onUnmounted(removeBodyAdditions);
  return { onClick };
}
var fixedOverlay = "";
const FixedOverlay = defineComponent({
  name: "DFixedOverlay",
  inheritAttrs: false,
  props: fixedOverlayProps,
  emits: ["update:modelValue", "click"],
  setup(props, ctx) {
    const {
      modelValue
    } = toRefs(props);
    const ns = useNamespace("fixed-overlay");
    const {
      onClick
    } = useFixedOverlay(props, ctx);
    return () => createVNode(Transition, {
      "name": ns.m("fade")
    }, {
      default: () => {
        var _a, _b;
        return [modelValue.value && createVNode("div", mergeProps({
          "class": ns.b()
        }, ctx.attrs, {
          "onClick": onClick
        }), [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
      }
    });
  }
});
const flexibleOverlayProps = {
  modelValue: {
    type: Boolean,
    default: false
  },
  origin: {
    type: Object,
    require: true
  },
  position: {
    type: Array,
    default: ["bottom"]
  },
  offset: {
    type: [Number, Object],
    default: 8
  },
  shiftOffset: {
    type: Number
  },
  align: {
    type: String,
    default: null
  },
  showArrow: {
    type: Boolean,
    default: false
  },
  isArrowCenter: {
    type: Boolean,
    default: true
  }
};
function getScrollParent(element) {
  const overflowRegex = /(auto|scroll|hidden)/;
  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
    const style = window.getComputedStyle(parent);
    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
      return parent;
    }
  }
  return window;
}
function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
  let { x, y } = point;
  if (!isArrowCenter) {
    const { width, height } = originRect;
    if (x && placement.includes("start")) {
      x = 12;
    }
    if (x && placement.includes("end")) {
      x = Math.round(width - 24);
    }
    if (y && placement.includes("start")) {
      y = 10;
    }
    if (y && placement.includes("end")) {
      y = height - 14;
    }
  }
  return { x, y };
}
function useOverlay(props, emit) {
  const overlayRef = ref();
  const arrowRef = ref();
  let originParent = null;
  const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
    const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
    const staticSide = {
      top: "bottom",
      right: "left",
      bottom: "top",
      left: "right"
    }[placement.split("-")[0]];
    Object.assign(arrowEl.style, {
      left: x ? `${x}px` : "",
      top: y ? `${y}px` : "",
      right: "",
      bottom: "",
      [staticSide]: "-4px"
    });
  };
  const updatePosition = async () => {
    const hostEl = props.origin;
    const overlayEl = unref(overlayRef.value);
    const arrowEl = unref(arrowRef.value);
    const middleware = [
      offset(props.offset),
      autoPlacement({
        alignment: props.align,
        allowedPlacements: props.position
      })
    ];
    props.showArrow && middleware.push(arrow({ element: arrowEl }));
    props.shiftOffset !== void 0 && middleware.push(shift());
    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
      strategy: "fixed",
      middleware
    });
    let applyX = x;
    let applyY = y;
    if (props.shiftOffset !== void 0) {
      const { x: shiftX, y: shiftY } = middlewareData.shift;
      shiftX < 0 && (applyX -= props.shiftOffset);
      shiftX > 0 && (applyX += props.shiftOffset);
      shiftY < 0 && (applyY -= props.shiftOffset);
      shiftY > 0 && (applyY += props.shiftOffset);
    }
    emit("positionChange", placement);
    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
  };
  watch(() => props.modelValue, () => {
    if (props.modelValue && props.origin) {
      originParent = getScrollParent(props.origin);
      nextTick(updatePosition);
      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
      originParent !== window && window.addEventListener("scroll", updatePosition);
      window.addEventListener("resize", updatePosition);
    } else {
      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
      originParent !== window && window.removeEventListener("scroll", updatePosition);
      window.removeEventListener("resize", updatePosition);
    }
  });
  onUnmounted(() => {
    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
    originParent !== window && window.removeEventListener("scroll", updatePosition);
    window.removeEventListener("resize", updatePosition);
  });
  return { arrowRef, overlayRef, updatePosition };
}
var flexibleOverlay = "";
defineComponent({
  name: "DFlexibleOverlay",
  inheritAttrs: false,
  props: flexibleOverlayProps,
  emits: ["update:modelValue", "positionChange"],
  setup(props, {
    slots,
    attrs,
    emit,
    expose
  }) {
    const ns = useNamespace("flexible-overlay");
    const {
      arrowRef,
      overlayRef,
      updatePosition
    } = useOverlay(props, emit);
    expose({
      updatePosition
    });
    return () => {
      var _a;
      return props.modelValue && createVNode("div", mergeProps({
        "ref": overlayRef,
        "class": ns.b()
      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
        "ref": arrowRef,
        "class": ns.e("arrow")
      }, null)]);
    };
  }
});
const inBrowser = typeof window !== "undefined";
function useModal(props, emit) {
  function close() {
    emit("update:modelValue", false);
  }
  function execClose() {
    props.beforeClose ? props.beforeClose(close) : close();
  }
  function onOverlayClick() {
    props.closeOnClickOverlay && execClose();
  }
  function onCloseBtnClick() {
    execClose();
  }
  function onKeydown(event) {
    if (event["keyCode"] === 27) {
      execClose();
    }
  }
  onMounted(() => {
    if (props.escapable) {
      window.addEventListener("keydown", onKeydown);
    }
  });
  onUnmounted(() => {
    if (props.escapable) {
      window.addEventListener("keydown", onKeydown);
    }
  });
  return { onCloseBtnClick, onOverlayClick };
}
function useModalRender(props) {
  const showContainer = ref(false);
  const showModal = ref(false);
  let lockScrollCb;
  const removeBodyAdditions = () => {
    lockScrollCb == null ? void 0 : lockScrollCb();
  };
  watch(() => props.modelValue, (val) => {
    if (val) {
      props.lockScroll && (lockScrollCb = lockScroll());
      showContainer.value = true;
      nextTick(() => {
        showModal.value = true;
      });
    } else {
      removeBodyAdditions();
      showModal.value = false;
      setTimeout(() => {
        showContainer.value = false;
      }, 100);
    }
  }, {
    immediate: true
  });
  onUnmounted(removeBodyAdditions);
  return { showContainer, showModal };
}
var Header = defineComponent({
  name: "DModalHeader",
  setup(props, {
    slots
  }) {
    const ns = useNamespace("modal");
    return () => {
      var _a;
      return createVNode("div", {
        "class": ns.e("header")
      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
    };
  }
});
var Body = defineComponent({
  name: "DModalBody",
  setup(props, {
    slots
  }) {
    const ns = useNamespace("modal");
    return () => {
      var _a;
      return createVNode("div", {
        "class": ns.e("body")
      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
    };
  }
});
var modal = "";
var Modal = defineComponent({
  name: "DModal",
  inheritAttrs: false,
  props: modalProps,
  emits: ["update:modelValue"],
  setup(props, {
    slots,
    attrs,
    emit
  }) {
    const ns = useNamespace("modal");
    const {
      modelValue,
      title,
      showClose,
      showOverlay,
      appendToBody
    } = toRefs(props);
    const {
      onCloseBtnClick,
      onOverlayClick
    } = useModal(props, emit);
    const {
      showContainer,
      showModal
    } = useModalRender(props);
    return () => createVNode(Teleport, {
      "to": "body",
      "disabled": !appendToBody.value
    }, {
      default: () => [showOverlay.value && createVNode(FixedOverlay, {
        "modelValue": modelValue.value,
        "onUpdate:modelValue": ($event) => modelValue.value = $event,
        "lock-scroll": false,
        "style": {
          zIndex: "calc(var(--devui-z-index-modal, 1050) - 1)"
        }
      }, null), showContainer.value && createVNode("div", {
        "class": ns.e("container"),
        "onClick": onOverlayClick
      }, [createVNode(Transition, {
        "name": ns.m("wipe")
      }, {
        default: () => {
          var _a;
          return [showModal.value && createVNode("div", mergeProps({
            "class": ns.b()
          }, attrs), [showClose.value && createVNode(Icon, {
            "name": "close",
            "class": "btn-close",
            "size": "var(--devui-font-size-md,12px)",
            "onClick": onCloseBtnClick
          }, null), slots.header ? slots.header() : title.value && createVNode(Header, null, {
            default: () => [title.value]
          }), createVNode(Body, null, {
            default: () => {
              var _a2;
              return [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)];
            }
          }), (_a = slots.footer) == null ? void 0 : _a.call(slots)])];
        }
      })])]
    });
  }
});
var Footer = defineComponent({
  name: "DModalFooter",
  setup(props, {
    slots
  }) {
    const ns = useNamespace("modal");
    return () => {
      var _a;
      return createVNode("div", {
        "class": ns.e("footer")
      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
    };
  }
});
class CommonModalService {
  constructor(anchorContainer) {
    this.anchorContainer = anchorContainer;
  }
  renderModal(anchor, props, children) {
    const vnode = h(this.component(), props, children);
    render(vnode, anchor);
    return vnode;
  }
  renderNull(anchor) {
    setTimeout(() => {
      render(null, anchor);
    }, 500);
  }
}
let vm;
class ModalService extends CommonModalService {
  component() {
    return Modal;
  }
  open(props = {}) {
    const anchor = document.createElement("div");
    this.anchorContainer.appendChild(anchor);
    const { header, content, footer, ...resProps } = props;
    const renderOrigin = (propsValue, onUpdateModelValue) => {
      return this.renderModal(anchor, {
        ...propsValue,
        modelValue: true,
        "onUpdate:modelValue": onUpdateModelValue
      }, { header, default: content, footer });
    };
    const hide = () => {
      var _a, _b, _c;
      const innerNeedHideOrNot = (value) => {
        if (!value) {
          hide();
        }
      };
      renderOrigin(resProps, (value) => {
        if (!value) {
          this.renderModal(anchor, { ...resProps, modelValue: false });
          this.renderNull(anchor);
        } else {
          renderOrigin(resProps, innerNeedHideOrNot);
        }
      });
      (_c = (_b = (_a = vm == null ? void 0 : vm.component) == null ? void 0 : _a.exposed) == null ? void 0 : _b.handleVisibleChange) == null ? void 0 : _c.call(_b, false);
    };
    const needHideOrNot = (value) => {
      if (!value) {
        hide();
      }
    };
    this.renderModal(anchor, { modelValue: false });
    vm = renderOrigin(resProps, needHideOrNot);
    return { hide };
  }
}
ModalService.token = "MODAL_SERVICE_TOKEN";
var index = {
  title: "Modal \u5F39\u7A97",
  category: "\u53CD\u9988",
  status: "100%",
  install(app) {
    app.component(Modal.name, Modal);
    app.component(Header.name, Header);
    app.component(Body.name, Body);
    app.component(Footer.name, Footer);
    if (!inBrowser) {
      return;
    }
    let anchorsContainer = document.getElementById("d-modal-anchors-container");
    if (!anchorsContainer) {
      anchorsContainer = document.createElement("div");
      anchorsContainer.setAttribute("id", "d-modal-anchors-container");
      document.body.appendChild(anchorsContainer);
    }
    app.provide(ModalService.token, new ModalService(anchorsContainer));
  }
};
export { Modal, index as default, modalProps };
