'use strict';

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

var vue = require('vue');
var CloseOutlined = require('@ant-design/icons-vue');
require('../hooks/index.js');
var transition = require('../_util/components/transition.js');
var getScroll = require('../_util/getScroll.js');
var scrollTo = require('../_util/scrollTo.js');
var throttleByAnimationFrame = require('../_util/throttleByAnimationFrame.js');
require('../_util/props-util/index.js');
var context = require('./context.js');
var index = require('./style/index.js');
var _interface = require('./interface.js');
var FloatButton = require('./FloatButton.js');
var initDefaultProps = require('../_util/props-util/initDefaultProps.js');
var useConfigInject = require('../config-provider/hooks/useConfigInject.js');

const BackTop = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ABackTop",
  inheritAttrs: false,
  props: initDefaultProps.default(_interface.backTopProps(), {
    visibilityHeight: 400,
    target: () => window,
    duration: 450,
    type: "default",
    shape: "circle"
  }),
  // emits: ['click'],
  setup(props, {
    slots,
    attrs,
    emit
  }) {
    const {
      prefixCls,
      direction
    } = useConfigInject.default(FloatButton.floatButtonPrefixCls, props);
    const [wrapSSR] = index.default(prefixCls);
    const domRef = vue.ref();
    const state = vue.reactive({
      visible: props.visibilityHeight === 0,
      scrollEvent: null
    });
    const getDefaultTarget = () => domRef.value && domRef.value.ownerDocument ? domRef.value.ownerDocument : window;
    const scrollToTop = (e) => {
      const {
        target = getDefaultTarget,
        duration
      } = props;
      scrollTo.default(0, {
        getContainer: target,
        duration
      });
      emit("click", e);
    };
    const handleScroll = throttleByAnimationFrame.default((e) => {
      const {
        visibilityHeight
      } = props;
      const scrollTop = getScroll.default(e.target, true);
      state.visible = scrollTop >= visibilityHeight;
    });
    const bindScrollEvent = () => {
      const {
        target
      } = props;
      const getTarget = target || getDefaultTarget;
      const container = getTarget();
      handleScroll({
        target: container
      });
      container == null ? void 0 : container.addEventListener("scroll", handleScroll);
    };
    const scrollRemove = () => {
      const {
        target
      } = props;
      const getTarget = target || getDefaultTarget;
      const container = getTarget();
      handleScroll.cancel();
      container == null ? void 0 : container.removeEventListener("scroll", handleScroll);
    };
    vue.watch(() => props.target, () => {
      scrollRemove();
      vue.nextTick(() => {
        bindScrollEvent();
      });
    });
    vue.onMounted(() => {
      vue.nextTick(() => {
        bindScrollEvent();
      });
    });
    vue.onActivated(() => {
      vue.nextTick(() => {
        bindScrollEvent();
      });
    });
    vue.onDeactivated(() => {
      scrollRemove();
    });
    vue.onBeforeUnmount(() => {
      scrollRemove();
    });
    const floatButtonGroupContext = context.useInjectFloatButtonGroupContext();
    return () => {
      const defaultElement = vue.createVNode("div", {
        "class": `${prefixCls.value}-content`
      }, [vue.createVNode("div", {
        "class": `${prefixCls.value}-icon`
      }, [vue.createVNode(CloseOutlined.VerticalAlignTopOutlined, null, null)])]);
      const floatButtonProps = {
        ...attrs,
        shape: (floatButtonGroupContext == null ? void 0 : floatButtonGroupContext.shape.value) || props.shape,
        onClick: scrollToTop,
        class: {
          [`${prefixCls.value}`]: true,
          [`${attrs.class}`]: attrs.class,
          [`${prefixCls.value}-rtl`]: direction.value === "rtl"
        }
      };
      const transitionProps = transition.getTransitionProps("fade");
      return wrapSSR(vue.createVNode(vue.Transition, transitionProps, {
        default: () => [vue.withDirectives(vue.createVNode(FloatButton.default, vue.mergeProps(floatButtonProps, {
          "ref": domRef
        }), {
          icon: () => vue.createVNode(CloseOutlined.VerticalAlignTopOutlined, null, null),
          default: () => {
            var _a;
            return ((_a = slots.default) == null ? void 0 : _a.call(slots)) || defaultElement;
          }
        }), [[vue.vShow, state.visible]])]
      }));
    };
  }
});

exports.default = BackTop;
//# sourceMappingURL=BackTop.js.map
