"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const index_esm = require("../../../../node_modules/@vant/use/dist/index.esm.js");
const useTouch = require("../../../../node_modules/vant/es/composables/use-touch.js");
const index = require("../../../../node_modules/vant/es/icon/index.js");
const create = require("../../../../node_modules/vant/es/utils/create.js");
const props = require("../../../../node_modules/vant/es/utils/props.js");
const dom = require("../../../../node_modules/vant/es/utils/dom.js");
const format = require("../../../../node_modules/vant/es/utils/format.js");
const basic = require("../../../../node_modules/vant/es/utils/basic.js");
const closest = require("../../../../node_modules/vant/es/utils/closest.js");
const floatingBubbleProps = {
  gapX: props.makeNumberProp(24),
  gapY: props.makeNumberProp(24),
  icon: String,
  axis: props.makeStringProp("y"),
  magnetic: String,
  offset: {
    type: Object,
    default: () => ({
      x: -1,
      y: -1
    })
  },
  teleport: {
    type: [String, Object],
    default: "body"
  }
};
const [name, bem] = create.createNamespace("floating-bubble");
var stdin_default = Vue.defineComponent({
  name,
  inheritAttrs: false,
  props: floatingBubbleProps,
  emits: ["click", "update:offset", "offsetChange"],
  setup(props2, { slots, emit, attrs }) {
    const rootRef = Vue.ref();
    const state = Vue.ref({
      x: 0,
      y: 0,
      width: 0,
      height: 0
    });
    const boundary = Vue.computed(() => ({
      top: props2.gapY,
      right: dom.windowWidth.value - state.value.width - props2.gapX,
      bottom: dom.windowHeight.value - state.value.height - props2.gapY,
      left: props2.gapX
    }));
    const dragging = Vue.ref(false);
    let initialized = false;
    const rootStyle = Vue.computed(() => {
      const style = {};
      const x = format.addUnit(state.value.x);
      const y = format.addUnit(state.value.y);
      style.transform = `translate3d(${x}, ${y}, 0)`;
      if (dragging.value || !initialized) {
        style.transition = "none";
      }
      return style;
    });
    const updateState = () => {
      if (!show.value) return;
      const { width, height } = index_esm.useRect(rootRef.value);
      const { offset } = props2;
      state.value = {
        x: offset.x > -1 ? offset.x : dom.windowWidth.value - width - props2.gapX,
        y: offset.y > -1 ? offset.y : dom.windowHeight.value - height - props2.gapY,
        width,
        height
      };
    };
    const touch = useTouch.useTouch();
    let prevX = 0;
    let prevY = 0;
    const onTouchStart = (e) => {
      touch.start(e);
      dragging.value = true;
      prevX = state.value.x;
      prevY = state.value.y;
    };
    const onTouchMove = (e) => {
      e.preventDefault();
      touch.move(e);
      if (props2.axis === "lock") return;
      if (!touch.isTap.value) {
        if (props2.axis === "x" || props2.axis === "xy") {
          let nextX = prevX + touch.deltaX.value;
          if (nextX < boundary.value.left) nextX = boundary.value.left;
          if (nextX > boundary.value.right) nextX = boundary.value.right;
          state.value.x = nextX;
        }
        if (props2.axis === "y" || props2.axis === "xy") {
          let nextY = prevY + touch.deltaY.value;
          if (nextY < boundary.value.top) nextY = boundary.value.top;
          if (nextY > boundary.value.bottom) nextY = boundary.value.bottom;
          state.value.y = nextY;
        }
        const offset = basic.pick(state.value, ["x", "y"]);
        emit("update:offset", offset);
      }
    };
    index_esm.useEventListener("touchmove", onTouchMove, {
      target: rootRef
    });
    const onTouchEnd = () => {
      dragging.value = false;
      Vue.nextTick(() => {
        if (props2.magnetic === "x") {
          const nextX = closest.closest(
            [boundary.value.left, boundary.value.right],
            state.value.x
          );
          state.value.x = nextX;
        }
        if (props2.magnetic === "y") {
          const nextY = closest.closest(
            [boundary.value.top, boundary.value.bottom],
            state.value.y
          );
          state.value.y = nextY;
        }
        if (!touch.isTap.value) {
          const offset = basic.pick(state.value, ["x", "y"]);
          emit("update:offset", offset);
          if (prevX !== offset.x || prevY !== offset.y) {
            emit("offsetChange", offset);
          }
        }
      });
    };
    const onClick = (e) => {
      if (touch.isTap.value) emit("click", e);
      else e.stopPropagation();
    };
    Vue.onMounted(() => {
      updateState();
      Vue.nextTick(() => {
        initialized = true;
      });
    });
    Vue.watch(
      [
        dom.windowWidth,
        dom.windowHeight,
        () => props2.gapX,
        () => props2.gapY,
        () => props2.offset
      ],
      updateState,
      {
        deep: true
      }
    );
    const show = Vue.ref(true);
    Vue.onActivated(() => {
      show.value = true;
    });
    Vue.onDeactivated(() => {
      if (props2.teleport) {
        show.value = false;
      }
    });
    return () => {
      const Content = Vue.withDirectives(
        Vue.createVNode(
          "div",
          Vue.mergeProps(
            {
              class: bem(),
              ref: rootRef,
              onTouchstartPassive: onTouchStart,
              onTouchend: onTouchEnd,
              onTouchcancel: onTouchEnd,
              onClickCapture: onClick,
              style: rootStyle.value
            },
            attrs
          ),
          [
            slots.default ? slots.default() : Vue.createVNode(
              index.default,
              {
                name: props2.icon,
                class: bem("icon")
              },
              null
            )
          ]
        ),
        [[Vue.vShow, show.value]]
      );
      return props2.teleport ? Vue.createVNode(
        Vue.Teleport,
        {
          to: props2.teleport
        },
        {
          default: () => [Content]
        }
      ) : Content;
    };
  }
});
exports.default = stdin_default;
exports.floatingBubbleProps = floatingBubbleProps;
