import { defineComponent, shallowRef, computed, watch, inject, nextTick, provide, onMounted, onUnmounted, createVNode } from 'vue';
import { CloseOutlined } from '@ant-design/icons-vue';
import '../../../utils/index.mjs';
import '../../../hooks/index.mjs';
import '../../../vue-components/index.mjs';
import '../../space/index.mjs';
import useConfigInject from '../../config-provider/src/hooks/useConfigInject.mjs';
import useStyle from '../style/index.mjs';
import DrawerWrapper from './DrawerWrapper.mjs';
import { drawerProps } from './props.mjs';
import { initDefaultProps } from '../../../utils/vue/initDefaultProps.mjs';
import { devWarning } from '../../../utils/log.mjs';
import { useScrollLocker } from '../../../hooks/use-scroll-locker/index.mjs';
import { isNumeric } from '../../../utils/is.mjs';
import { getPropsSlot } from '../../../utils/vue/props.mjs';
import { classNames } from '../../../utils/dom/class.mjs';
import { getTransitionProps, getTransitionName } from '../../../vue-components/transition/src/transition.mjs';
import { omit } from '../../../utils/lang/omit.mjs';
import { NoCompactStyle } from '../../space/src/NoCompactStyle.mjs';

const defaultPushState = {
  distance: 180
};
var ADrawer = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ADrawer",
  inheritAttrs: false,
  props: initDefaultProps(drawerProps(), {
    closable: true,
    placement: "right",
    maskClosable: true,
    mask: true,
    level: null,
    keyboard: true,
    push: defaultPushState
  }),
  slots: Object,
  // emits: ['update:visible', 'close', 'afterVisibleChange'],
  setup(props, {
    emit,
    slots,
    attrs
  }) {
    const sPush = shallowRef(false);
    const destroyClose = shallowRef(false);
    const vcDrawer = shallowRef(null);
    const load = shallowRef(false);
    const visible = shallowRef(false);
    const mergedOpen = computed(() => {
      var _a;
      return (_a = props.open) != null ? _a : props.visible;
    });
    watch(mergedOpen, () => {
      if (mergedOpen.value)
        load.value = true;
      else
        visible.value = false;
    }, {
      immediate: true
    });
    watch([mergedOpen, load], () => {
      if (mergedOpen.value && load.value)
        visible.value = true;
    }, {
      immediate: true
    });
    const parentDrawerOpts = inject("parentDrawerOpts", null);
    const {
      prefixCls,
      getPopupContainer,
      direction
    } = useConfigInject("drawer", props);
    const [wrapSSR, hashId] = useStyle(prefixCls);
    const getContainer = computed(() => (
      // 有可能为 false，所以不能直接判断
      props.getContainer === void 0 && (getPopupContainer == null ? void 0 : getPopupContainer.value) ? () => getPopupContainer.value(document.body) : props.getContainer
    ));
    devWarning(!props.afterVisibleChange, "Drawer", "`afterVisibleChange` prop is deprecated, please use `@afterVisibleChange` event instead");
    if (process.env.NODE_ENV !== "production") {
      [["visible", "open"], ["onUpdate:visible", "onUpdate:open"], ["onAfterVisibleChange", "onAfterOpenChange"]].forEach(([deprecatedName, newName]) => {
        devWarning(!props[deprecatedName], "Drawer", `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`);
      });
    }
    const domFocus = () => {
      var _a, _b;
      (_b = (_a = vcDrawer.value) == null ? void 0 : _a.domFocus) == null ? void 0 : _b.call(_a);
    };
    const setPush = () => {
      sPush.value = true;
    };
    const setPull = () => {
      sPush.value = false;
      nextTick(() => {
        domFocus();
      });
    };
    provide("parentDrawerOpts", {
      setPush,
      setPull
    });
    if (props.lockScroll)
      useScrollLocker(visible);
    onMounted(() => {
      if (mergedOpen.value && parentDrawerOpts)
        parentDrawerOpts.setPush();
    });
    onUnmounted(() => {
      if (parentDrawerOpts)
        parentDrawerOpts.setPull();
    });
    watch(visible, () => {
      if (parentDrawerOpts) {
        if (visible.value)
          parentDrawerOpts.setPush();
        else
          parentDrawerOpts.setPull();
      }
    }, {
      flush: "post"
    });
    const close = (e) => {
      emit("update:visible", false);
      emit("update:open", false);
      emit("close", e);
    };
    const afterVisibleChange = (open) => {
      var _a;
      if (!open) {
        if (destroyClose.value === false) {
          destroyClose.value = true;
        }
        if (props.destroyOnClose)
          load.value = false;
      }
      (_a = props.afterVisibleChange) == null ? void 0 : _a.call(props, open);
      emit("afterVisibleChange", open);
      emit("afterOpenChange", open);
    };
    const pushTransform = computed(() => {
      const {
        push,
        placement
      } = props;
      let distance;
      if (typeof push === "boolean")
        distance = push ? defaultPushState.distance : 0;
      else
        distance = push.distance;
      distance = Number.parseFloat(String(distance || 0));
      if (placement === "left" || placement === "right")
        return `translateX(${placement === "left" ? distance : -distance}px)`;
      if (placement === "top" || placement === "bottom")
        return `translateY(${placement === "top" ? distance : -distance}px)`;
      return null;
    });
    const mergedWidth = computed(() => {
      var _a;
      return (_a = props.width) != null ? _a : props.size === "large" ? 736 : 378;
    });
    const mergedHeight = computed(() => {
      var _a;
      return (_a = props.height) != null ? _a : props.size === "large" ? 736 : 378;
    });
    const offsetStyle = computed(() => {
      const {
        mask,
        placement
      } = props;
      if (!visible.value && !mask)
        return {};
      const val = {};
      if (placement === "left" || placement === "right")
        val.width = isNumeric(mergedWidth.value) ? `${mergedWidth.value}px` : mergedWidth.value;
      else
        val.height = isNumeric(mergedHeight.value) ? `${mergedHeight.value}px` : mergedHeight.value;
      return val;
    });
    const wrapperStyle = computed(() => {
      const {
        zIndex,
        contentWrapperStyle
      } = props;
      const val = offsetStyle.value;
      return [{
        zIndex,
        transform: sPush.value ? pushTransform.value : void 0
      }, {
        ...contentWrapperStyle
      }, val];
    });
    const renderCloseIcon = (prefixCls2) => {
      var _a;
      const {
        closable
      } = props;
      const $closeIcon = slots.closeIcon ? (_a = slots.closeIcon) == null ? void 0 : _a.call(slots) : props.closeIcon;
      return closable && createVNode("button", {
        "key": "closer",
        "onClick": close,
        "aria-label": "Close",
        "class": `${prefixCls2}-close`
      }, [$closeIcon === void 0 ? createVNode(CloseOutlined, null, null) : $closeIcon]);
    };
    const renderHeader = (prefixCls2) => {
      const {
        closable,
        headerStyle
      } = props;
      const extra = getPropsSlot(slots, props, "extra");
      const title = getPropsSlot(slots, props, "title");
      if (!title && !closable)
        return null;
      return createVNode("div", {
        "class": classNames(`${prefixCls2}-header`, {
          [`${prefixCls2}-header-close-only`]: closable && !title && !extra
        }),
        "style": headerStyle
      }, [createVNode("div", {
        "class": `${prefixCls2}-header-title`
      }, [renderCloseIcon(prefixCls2), title && createVNode("div", {
        "class": `${prefixCls2}-title`
      }, [title])]), extra && createVNode("div", {
        "class": `${prefixCls2}-extra`
      }, [extra])]);
    };
    const renderFooter = (prefix) => {
      const footer = getPropsSlot(slots, props, "footer");
      if (!footer)
        return null;
      const footerClassName = `${prefix}-footer`;
      return createVNode("div", {
        "class": footerClassName,
        "style": props.footerStyle
      }, [footer]);
    };
    const renderBody = (prefix) => {
      var _a;
      if (destroyClose.value && !props.forceRender && !load.value)
        return null;
      const {
        bodyStyle,
        drawerStyle
      } = props;
      return createVNode("div", {
        "class": `${prefix}-wrapper-body`,
        "style": drawerStyle
      }, [renderHeader(prefix), createVNode("div", {
        "key": "body",
        "class": `${prefix}-body`,
        "style": bodyStyle
      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), renderFooter(prefix)]);
    };
    const drawerClassName = computed(() => classNames({
      "no-mask": !props.mask,
      [`${prefixCls.value}-rtl`]: direction.value === "rtl"
    }, props.rootClassName, hashId.value));
    const maskMotion = computed(() => {
      return getTransitionProps(getTransitionName(prefixCls.value, "mask-motion"));
    });
    const panelMotion = (motionPlacement) => {
      return getTransitionProps(getTransitionName(prefixCls.value, `panel-motion-${motionPlacement}`));
    };
    return () => {
      const {
        width,
        height,
        placement,
        mask,
        forceRender,
        ...rest
      } = props;
      const vcDrawerProps = {
        ...attrs,
        ...omit(rest, ["size", "closeIcon", "closable", "destroyOnClose", "drawerStyle", "headerStyle", "bodyStyle", "title", "push", "onAfterVisibleChange", "onClose", "onUpdate:visible", "onUpdate:open", "visible"]),
        forceRender,
        onClose: close,
        afterVisibleChange,
        handler: false,
        prefixCls: prefixCls.value,
        open: visible.value,
        showMask: mask,
        placement,
        ref: vcDrawer
      };
      return wrapSSR(createVNode(NoCompactStyle, null, {
        default: () => [createVNode(DrawerWrapper, {
          ...vcDrawerProps,
          "maskMotion": maskMotion.value,
          "motion": panelMotion,
          "width": mergedWidth.value,
          "height": mergedHeight.value,
          "getContainer": getContainer.value,
          "rootClassName": drawerClassName.value,
          "rootStyle": props.rootStyle,
          "contentWrapperStyle": wrapperStyle.value
        }, {
          handler: props.handle ? () => props.handle : slots.handle,
          default: () => renderBody(prefixCls.value)
        })]
      }));
    };
  }
});

export { ADrawer as default };
//# sourceMappingURL=Drawer.mjs.map
