"use strict";
"use client";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
var _throttleByAnimationFrame = _interopRequireDefault(require("../_util/throttleByAnimationFrame"));
var _configProvider = require("../config-provider");
var _style = _interopRequireDefault(require("./style"));
var _utils = require("./utils");
const TRIGGER_EVENTS = ['resize', 'scroll', 'touchstart', 'touchmove', 'touchend', 'pageshow', 'load'];
function getDefaultTarget() {
  return typeof window !== 'undefined' ? window : null;
}
var AffixStatus;
(function (AffixStatus) {
  AffixStatus[AffixStatus["None"] = 0] = "None";
  AffixStatus[AffixStatus["Prepare"] = 1] = "Prepare";
})(AffixStatus || (AffixStatus = {}));
let InternalAffix = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2.default)(InternalAffix, _React$Component);
  var _super = (0, _createSuper2.default)(InternalAffix);
  function InternalAffix() {
    var _this;
    (0, _classCallCheck2.default)(this, InternalAffix);
    _this = _super.apply(this, arguments);
    _this.state = {
      status: AffixStatus.None,
      lastAffix: false,
      prevTarget: null
    };
    _this.placeholderNodeRef = /*#__PURE__*/(0, _react.createRef)();
    _this.fixedNodeRef = /*#__PURE__*/(0, _react.createRef)();
    _this.addListeners = () => {
      const targetFunc = _this.getTargetFunc();
      const target = targetFunc === null || targetFunc === void 0 ? void 0 : targetFunc();
      const {
        prevTarget
      } = _this.state;
      if (prevTarget !== target) {
        TRIGGER_EVENTS.forEach(eventName => {
          prevTarget === null || prevTarget === void 0 ? void 0 : prevTarget.removeEventListener(eventName, _this.lazyUpdatePosition);
          target === null || target === void 0 ? void 0 : target.addEventListener(eventName, _this.lazyUpdatePosition);
        });
        _this.updatePosition();
        _this.setState({
          prevTarget: target
        });
      }
    };
    _this.removeListeners = () => {
      if (_this.timer) {
        clearTimeout(_this.timer);
        _this.timer = null;
      }
      const {
        prevTarget
      } = _this.state;
      const targetFunc = _this.getTargetFunc();
      const newTarget = targetFunc === null || targetFunc === void 0 ? void 0 : targetFunc();
      TRIGGER_EVENTS.forEach(eventName => {
        newTarget === null || newTarget === void 0 ? void 0 : newTarget.removeEventListener(eventName, _this.lazyUpdatePosition);
        prevTarget === null || prevTarget === void 0 ? void 0 : prevTarget.removeEventListener(eventName, _this.lazyUpdatePosition);
      });
      _this.updatePosition.cancel();
      // https://github.com/ant-design/ant-design/issues/22683
      _this.lazyUpdatePosition.cancel();
    };
    _this.getOffsetTop = () => {
      const {
        offsetBottom,
        offsetTop
      } = _this.props;
      return offsetBottom === undefined && offsetTop === undefined ? 0 : offsetTop;
    };
    _this.getOffsetBottom = () => _this.props.offsetBottom;
    // =================== Measure ===================
    _this.measure = () => {
      const {
        status,
        lastAffix
      } = _this.state;
      const {
        onChange
      } = _this.props;
      const targetFunc = _this.getTargetFunc();
      if (status !== AffixStatus.Prepare || !_this.fixedNodeRef.current || !_this.placeholderNodeRef.current || !targetFunc) {
        return;
      }
      const offsetTop = _this.getOffsetTop();
      const offsetBottom = _this.getOffsetBottom();
      const targetNode = targetFunc();
      if (targetNode) {
        const newState = {
          status: AffixStatus.None
        };
        const placeholderRect = (0, _utils.getTargetRect)(_this.placeholderNodeRef.current);
        if (placeholderRect.top === 0 && placeholderRect.left === 0 && placeholderRect.width === 0 && placeholderRect.height === 0) {
          return;
        }
        const targetRect = (0, _utils.getTargetRect)(targetNode);
        const fixedTop = (0, _utils.getFixedTop)(placeholderRect, targetRect, offsetTop);
        const fixedBottom = (0, _utils.getFixedBottom)(placeholderRect, targetRect, offsetBottom);
        if (fixedTop !== undefined) {
          newState.affixStyle = {
            position: 'fixed',
            top: fixedTop,
            width: placeholderRect.width,
            height: placeholderRect.height
          };
          newState.placeholderStyle = {
            width: placeholderRect.width,
            height: placeholderRect.height
          };
        } else if (fixedBottom !== undefined) {
          newState.affixStyle = {
            position: 'fixed',
            bottom: fixedBottom,
            width: placeholderRect.width,
            height: placeholderRect.height
          };
          newState.placeholderStyle = {
            width: placeholderRect.width,
            height: placeholderRect.height
          };
        }
        newState.lastAffix = !!newState.affixStyle;
        if (onChange && lastAffix !== newState.lastAffix) {
          onChange(newState.lastAffix);
        }
        _this.setState(newState);
      }
    };
    _this.prepareMeasure = () => {
      // event param is used before. Keep compatible ts define here.
      _this.setState({
        status: AffixStatus.Prepare,
        affixStyle: undefined,
        placeholderStyle: undefined
      });
      // Test if `updatePosition` called
      if (process.env.NODE_ENV === 'test') {
        const {
          onTestUpdatePosition
        } = _this.props;
        onTestUpdatePosition === null || onTestUpdatePosition === void 0 ? void 0 : onTestUpdatePosition();
      }
    };
    _this.updatePosition = (0, _throttleByAnimationFrame.default)(() => {
      _this.prepareMeasure();
    });
    _this.lazyUpdatePosition = (0, _throttleByAnimationFrame.default)(() => {
      const targetFunc = _this.getTargetFunc();
      const {
        affixStyle
      } = _this.state;
      // Check position change before measure to make Safari smooth
      if (targetFunc && affixStyle) {
        const offsetTop = _this.getOffsetTop();
        const offsetBottom = _this.getOffsetBottom();
        const targetNode = targetFunc();
        if (targetNode && _this.placeholderNodeRef.current) {
          const targetRect = (0, _utils.getTargetRect)(targetNode);
          const placeholderRect = (0, _utils.getTargetRect)(_this.placeholderNodeRef.current);
          const fixedTop = (0, _utils.getFixedTop)(placeholderRect, targetRect, offsetTop);
          const fixedBottom = (0, _utils.getFixedBottom)(placeholderRect, targetRect, offsetBottom);
          if (fixedTop !== undefined && affixStyle.top === fixedTop || fixedBottom !== undefined && affixStyle.bottom === fixedBottom) {
            return;
          }
        }
      }
      // Directly call prepare measure since it's already throttled.
      _this.prepareMeasure();
    });
    return _this;
  }
  (0, _createClass2.default)(InternalAffix, [{
    key: "getTargetFunc",
    value: function getTargetFunc() {
      const {
        getTargetContainer
      } = this.context;
      const {
        target
      } = this.props;
      if (target !== undefined) {
        return target;
      }
      return getTargetContainer !== null && getTargetContainer !== void 0 ? getTargetContainer : getDefaultTarget;
    }
    // Event handler
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      // [Legacy] Wait for parent component ref has its value.
      // We should use target as directly element instead of function which makes element check hard.
      this.timer = setTimeout(this.addListeners);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      this.addListeners();
      if (prevProps.offsetTop !== this.props.offsetTop || prevProps.offsetBottom !== this.props.offsetBottom) {
        this.updatePosition();
      }
      this.measure();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.removeListeners();
    }
    // =================== Render ===================
  }, {
    key: "render",
    value: function render() {
      const {
        affixStyle,
        placeholderStyle
      } = this.state;
      const {
        affixPrefixCls,
        rootClassName,
        children
      } = this.props;
      const className = (0, _classnames.default)(affixStyle && rootClassName, {
        [affixPrefixCls]: !!affixStyle
      });
      let props = (0, _omit.default)(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange', 'affixPrefixCls', 'rootClassName']);
      // Omit this since `onTestUpdatePosition` only works on test.
      if (process.env.NODE_ENV === 'test') {
        props = (0, _omit.default)(props, ['onTestUpdatePosition']);
      }
      return /*#__PURE__*/_react.default.createElement(_rcResizeObserver.default, {
        onResize: this.updatePosition
      }, /*#__PURE__*/_react.default.createElement("div", Object.assign({}, props, {
        ref: this.placeholderNodeRef
      }), affixStyle && /*#__PURE__*/_react.default.createElement("div", {
        style: placeholderStyle,
        "aria-hidden": "true"
      }), /*#__PURE__*/_react.default.createElement("div", {
        className: className,
        ref: this.fixedNodeRef,
        style: affixStyle
      }, /*#__PURE__*/_react.default.createElement(_rcResizeObserver.default, {
        onResize: this.updatePosition
      }, children))));
    }
  }]);
  return InternalAffix;
}(_react.default.Component);
InternalAffix.contextType = _configProvider.ConfigContext;
const Affix = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const {
    prefixCls: customizePrefixCls,
    rootClassName
  } = props;
  const {
    getPrefixCls
  } = (0, _react.useContext)(_configProvider.ConfigContext);
  const affixPrefixCls = getPrefixCls('affix', customizePrefixCls);
  const [wrapSSR, hashId] = (0, _style.default)(affixPrefixCls);
  const AffixProps = Object.assign(Object.assign({}, props), {
    affixPrefixCls,
    rootClassName: (0, _classnames.default)(rootClassName, hashId)
  });
  return wrapSSR( /*#__PURE__*/_react.default.createElement(InternalAffix, Object.assign({}, AffixProps, {
    ref: ref
  })));
});
if (process.env.NODE_ENV !== 'production') {
  Affix.displayName = 'Affix';
}
var _default = exports.default = Affix;