'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.cjs');
require('../../../vue-components/index.cjs');
var useConfigInject = require('../../config-provider/src/hooks/useConfigInject.cjs');
var index = require('../style/index.cjs');
var utils = require('./utils.cjs');
var props = require('./props.cjs');
var _interface = require('./interface.cjs');
var throttleByAnimationFrame = require('../../../utils/throttleByAnimationFrame.cjs');
var _class = require('../../../utils/dom/class.cjs');
var omit = require('../../../utils/lang/omit.cjs');
var index$1 = require('../../../vue-components/vc-resize-observer/src/index.cjs');

var AAffix = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "AAffix",
  inheritAttrs: false,
  props: props.affixProps(),
  setup(props, {
    slots,
    emit,
    expose,
    attrs
  }) {
    const placeholderNode = vue.shallowRef();
    const fixedNode = vue.shallowRef();
    const state = vue.reactive({
      affixStyle: void 0,
      placeholderStyle: void 0,
      status: _interface.AffixStatus.None,
      lastAffix: false,
      prevTarget: null,
      timeout: null
    });
    const currentInstance = vue.getCurrentInstance();
    const offsetTop = vue.computed(() => {
      return props.offsetBottom === void 0 && props.offsetTop === void 0 ? 0 : props.offsetTop;
    });
    const offsetBottom = vue.computed(() => props.offsetBottom);
    const measure = () => {
      const {
        status,
        lastAffix
      } = state;
      const {
        target
      } = props;
      if (status !== _interface.AffixStatus.Prepare || !fixedNode.value || !placeholderNode.value || !target)
        return;
      const targetNode = target();
      if (!targetNode)
        return;
      const newState = {
        status: _interface.AffixStatus.None
      };
      const placeholderRect = utils.getTargetRect(placeholderNode.value);
      if (placeholderRect.top === 0 && placeholderRect.left === 0 && placeholderRect.width === 0 && placeholderRect.height === 0)
        return;
      const targetRect = utils.getTargetRect(targetNode);
      const fixedTop = utils.getFixedTop(placeholderRect, targetRect, offsetTop.value);
      const fixedBottom = utils.getFixedBottom(placeholderRect, targetRect, offsetBottom.value);
      if (placeholderRect.top === 0 && placeholderRect.left === 0 && placeholderRect.width === 0 && placeholderRect.height === 0)
        return;
      if (fixedTop !== void 0) {
        const width = `${placeholderRect.width}px`;
        const height = `${placeholderRect.height}px`;
        newState.affixStyle = {
          position: "fixed",
          top: fixedTop,
          width,
          height
        };
        newState.placeholderStyle = {
          width,
          height
        };
      } else if (fixedBottom !== void 0) {
        const width = `${placeholderRect.width}px`;
        const height = `${placeholderRect.height}px`;
        newState.affixStyle = {
          position: "fixed",
          bottom: fixedBottom,
          width,
          height
        };
        newState.placeholderStyle = {
          width,
          height
        };
      }
      newState.lastAffix = !!newState.affixStyle;
      if (lastAffix !== newState.lastAffix)
        emit("change", newState.lastAffix);
      Object.assign(state, newState);
    };
    const prepareMeasure = () => {
      Object.assign(state, {
        status: _interface.AffixStatus.Prepare,
        affixStyle: void 0,
        placeholderStyle: void 0
      });
      if (process.env.NODE_ENV === "test")
        emit("testUpdatePosition");
    };
    const updatePosition = throttleByAnimationFrame.throttleByAnimationFrame(() => {
      prepareMeasure();
    });
    const lazyUpdatePosition = throttleByAnimationFrame.throttleByAnimationFrame(() => {
      const {
        target
      } = props;
      const {
        affixStyle
      } = state;
      if (target && affixStyle) {
        const targetNode = target();
        if (targetNode && placeholderNode.value) {
          const targetRect = utils.getTargetRect(targetNode);
          const placeholderRect = utils.getTargetRect(placeholderNode.value);
          const fixedTop = utils.getFixedTop(placeholderRect, targetRect, offsetTop.value);
          const fixedBottom = utils.getFixedBottom(placeholderRect, targetRect, offsetBottom.value);
          if (fixedTop !== void 0 && affixStyle.top === fixedTop || fixedBottom !== void 0 && affixStyle.bottom === fixedBottom)
            return;
        }
      }
      prepareMeasure();
    });
    expose({
      updatePosition,
      lazyUpdatePosition
    });
    vue.watch(() => props.target, (val) => {
      const newTarget = (val == null ? void 0 : val()) || null;
      if (state.prevTarget !== newTarget) {
        utils.removeObserveTarget(currentInstance);
        if (newTarget) {
          utils.addObserveTarget(newTarget, currentInstance);
          updatePosition();
        }
        state.prevTarget = newTarget;
      }
    });
    vue.watch(() => [props.offsetTop, props.offsetBottom], updatePosition);
    vue.onMounted(() => {
      const {
        target
      } = props;
      if (target) {
        state.timeout = setTimeout(() => {
          utils.addObserveTarget(target(), currentInstance);
          updatePosition();
        });
      }
    });
    vue.onUpdated(() => {
      measure();
    });
    vue.onUnmounted(() => {
      clearTimeout(state.timeout);
      utils.removeObserveTarget(currentInstance);
      updatePosition.cancel();
      lazyUpdatePosition.cancel();
    });
    const {
      prefixCls
    } = useConfigInject.default("affix", props);
    const [wrapSSR, hashId] = index.default(prefixCls);
    return () => {
      const {
        affixStyle,
        placeholderStyle,
        status
      } = state;
      const className = _class.classNames({
        [prefixCls.value]: affixStyle,
        [hashId.value]: true
      });
      const restProps = omit.omit(props, ["prefixCls", "offsetTop", "offsetBottom", "target", "onChange", "onTestUpdatePosition"]);
      return wrapSSR(vue.createVNode(index$1.default, {
        "onResize": updatePosition
      }, {
        default: () => {
          var _a;
          return [vue.createVNode("div", {
            ...restProps,
            ...attrs,
            "ref": placeholderNode,
            "data-measure-status": status
          }, [affixStyle && vue.createVNode("div", {
            "style": placeholderStyle,
            "aria-hidden": "true"
          }, null), vue.createVNode("div", {
            "class": className,
            "ref": fixedNode,
            "style": affixStyle
          }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])])];
        }
      }));
    };
  }
});

exports.default = AAffix;
//# sourceMappingURL=Affix.cjs.map
