var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/plus/contactInfo/components/SwipeAction/index.tsx
var SwipeAction_exports = {};
__export(SwipeAction_exports, {
  SwipeAction: () => SwipeAction
});
module.exports = __toCommonJS(SwipeAction_exports);
var import_web = require("@react-spring/web");
var import_use_gesture_react = require("@use-gesture/react/dist/use-gesture-react.cjs");
var import_react = __toESM(require("react"));
var import_index = require("./index.less");
function withNativeProps(props, element) {
  const p = {
    ...element.props
  };
  if (props.className) {
    p.className = props.className + (element.props.className ? ` ${element.props.className}` : "");
  }
  if (props.style) {
    p.style = {
      ...props.style,
      ...element.props.style
    };
  }
  return import_react.default.cloneElement(element, p);
}
function nearest(arr, target) {
  return arr.reduce((prev, curr) => {
    return Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev;
  });
}
function mergeProps(a, b) {
  return {
    ...a,
    ...b
  };
}
function withStopPropagation(events, element) {
  if (!events.includes("click")) {
    return element;
  }
  const onClick = (e) => {
    var _a, _b;
    e.stopPropagation();
    (_b = (_a = element.props).onClick) == null ? void 0 : _b.call(_a, e);
  };
  return import_react.default.cloneElement(element, {
    ...element.props,
    onClick
  });
}
var Button = ({
  children,
  className,
  style,
  onClick
}) => {
  return /* @__PURE__ */ import_react.default.createElement(
    "button",
    {
      className,
      style: {
        border: "none",
        background: (style == null ? void 0 : style["--background-color"]) || "transparent",
        ...style
      },
      onClick
    },
    children
  );
};
var classPrefix = `pisell-custom-swipe-action`;
var defaultProps = {
  rightActions: [],
  leftActions: [],
  closeOnTouchOutside: true,
  closeOnAction: true,
  stopPropagation: []
};
var SwipeAction = (0, import_react.forwardRef)(
  (p, ref) => {
    const props = mergeProps(defaultProps, p);
    const rootRef = (0, import_react.useRef)(null);
    const leftRef = (0, import_react.useRef)(null);
    const rightRef = (0, import_react.useRef)(null);
    const [containerHeight, setContainerHeight] = (0, import_react.useState)(0);
    function getWidth(ref2) {
      const element = ref2.current;
      if (!element) return 0;
      return element.offsetWidth;
    }
    function getHeight(ref2) {
      const element = ref2.current;
      if (!element) return 0;
      return element.offsetHeight;
    }
    function getLeftWidth() {
      return getWidth(leftRef);
    }
    function getRightWidth() {
      return getWidth(rightRef);
    }
    function getRootHeight() {
      return getHeight(rootRef);
    }
    const [{ x }, api] = (0, import_web.useSpring)(
      () => ({
        x: 0,
        config: { tension: 200, friction: 30 }
      }),
      []
    );
    const draggingRef = (0, import_react.useRef)(false);
    const dragCancelRef = (0, import_react.useRef)(null);
    function forceCancelDrag() {
      var _a;
      (_a = dragCancelRef.current) == null ? void 0 : _a.call(dragCancelRef);
      draggingRef.current = false;
    }
    const bind = (0, import_use_gesture_react.useDrag)(
      (state) => {
        var _a;
        dragCancelRef.current = state.cancel;
        if (!state.intentional) return;
        if (state.down) {
          draggingRef.current = true;
        }
        if (!draggingRef.current) return;
        const [offsetX] = state.offset;
        if (state.last) {
          const leftWidth = getLeftWidth();
          const rightWidth = getRightWidth();
          let position = offsetX + state.velocity[0] * state.direction[0] * 50;
          if (offsetX > 0) {
            position = Math.max(0, position);
          } else if (offsetX < 0) {
            position = Math.min(0, position);
          } else {
            position = 0;
          }
          const targetX = nearest([-rightWidth, 0, leftWidth], position);
          api.start({
            x: targetX
          });
          if (targetX !== 0) {
            (_a = p.onActionsReveal) == null ? void 0 : _a.call(p, targetX > 0 ? "left" : "right");
          }
          window.setTimeout(() => {
            draggingRef.current = false;
          });
        } else {
          api.start({
            x: offsetX,
            immediate: true
          });
        }
      },
      {
        from: () => [x.get(), 0],
        bounds: () => {
          const leftWidth = getLeftWidth();
          const rightWidth = getRightWidth();
          return {
            left: -rightWidth,
            right: leftWidth
          };
        },
        axis: "x",
        preventScroll: true,
        pointer: { touch: true },
        triggerAllEvents: true
      }
    );
    const close = () => {
      var _a;
      api.start({
        x: 0
      });
      forceCancelDrag();
      (_a = props.onClose) == null ? void 0 : _a.call(props);
    };
    (0, import_react.useImperativeHandle)(ref, () => ({
      show: (side = "right") => {
        var _a;
        if (side === "right") {
          api.start({
            x: -getRightWidth()
          });
        } else if (side === "left") {
          api.start({
            x: getLeftWidth()
          });
        }
        (_a = p.onActionsReveal) == null ? void 0 : _a.call(p, side);
      },
      close
    }));
    (0, import_react.useEffect)(() => {
      const updateHeight = () => {
        const height = getRootHeight();
        setContainerHeight(height);
      };
      updateHeight();
      const resizeObserver = new ResizeObserver(updateHeight);
      if (rootRef.current) {
        resizeObserver.observe(rootRef.current);
      }
      return () => {
        resizeObserver.disconnect();
      };
    }, []);
    (0, import_react.useEffect)(() => {
      if (!props.closeOnTouchOutside) return;
      function handle(e) {
        if (e.target && props.escapeDom) {
          const container = document.querySelector(props.escapeDom);
          if (container == null ? void 0 : container.contains(e.target)) return;
        }
        if (x.get() === 0) {
          return;
        }
        const root = rootRef.current;
        if (root && !root.contains(e.target)) {
          close();
        }
      }
      if ("ontouchstart" in window) {
        document.addEventListener("touchstart", handle);
      } else {
        document.addEventListener("mousedown", handle);
      }
      return () => {
        document.removeEventListener("touchstart", handle);
        document.removeEventListener("mousedown", handle);
      };
    }, [props.closeOnTouchOutside, props.escapeDom]);
    const getRightContainerClass = () => {
      const baseClass = `${classPrefix}-actions ${classPrefix}-actions-right`;
      if (containerHeight > 180) {
        return `${baseClass} ${classPrefix}-height-large`;
      } else if (containerHeight > 120) {
        return `${baseClass} ${classPrefix}-height-medium`;
      }
      return `${baseClass} ${classPrefix}-height-small`;
    };
    const getRightActionButtonClass = () => {
      if (containerHeight > 180) {
        return `${classPrefix}-action-height-large`;
      } else if (containerHeight > 120) {
        return `${classPrefix}-action-height-medium`;
      }
      return `${classPrefix}-action-height-small`;
    };
    function renderAction(action, isRightAction = false) {
      const color = action.color ?? "light";
      const _style = action.style || {};
      const buttonClass = isRightAction ? `${classPrefix}-action-button ${getRightActionButtonClass()}` : `${classPrefix}-action-button`;
      return /* @__PURE__ */ import_react.default.createElement(
        Button,
        {
          key: action.key,
          className: buttonClass,
          style: {
            "--background-color": colorRecord[color] ?? color,
            ..._style
          },
          onClick: (e) => {
            var _a, _b;
            if (props.closeOnAction) {
              close();
            }
            (_a = action.onClick) == null ? void 0 : _a.call(action, e);
            (_b = props.onAction) == null ? void 0 : _b.call(props, action, e);
          }
        },
        action.text
      );
    }
    return withNativeProps(
      props,
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: classPrefix,
          ...bind(),
          ref: rootRef,
          onClickCapture: (e) => {
            if (draggingRef.current) {
              e.stopPropagation();
              e.preventDefault();
            }
          }
        },
        /* @__PURE__ */ import_react.default.createElement(import_web.animated.div, { className: `${classPrefix}-track`, style: { x } }, withStopPropagation(
          props.stopPropagation,
          /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: `${classPrefix}-actions ${classPrefix}-actions-left`,
              ref: leftRef
            },
            props.leftActions.map((action) => renderAction(action, false))
          )
        ), /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: `${classPrefix}-content`,
            onClickCapture: (e) => {
              if (x.goal !== 0) {
                e.preventDefault();
                e.stopPropagation();
                close();
              }
            }
          },
          /* @__PURE__ */ import_react.default.createElement(
            import_web.animated.div,
            {
              style: {
                pointerEvents: x.to(
                  (v) => v !== 0 && x.goal !== 0 ? "none" : "auto"
                )
              }
            },
            props.children
          )
        ), withStopPropagation(
          props.stopPropagation,
          /* @__PURE__ */ import_react.default.createElement("div", { className: getRightContainerClass(), ref: rightRef }, props.rightActions.map((action) => renderAction(action, true)))
        ))
      )
    );
  }
);
var colorRecord = {
  light: "#ccc",
  weak: "#999",
  primary: "#1677ff",
  success: "#00b578",
  warning: "#ff8f1f",
  danger: "#ff3141"
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  SwipeAction
});
