const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _react_spring_web = require("@react-spring/web");
let _use_gesture_react = require("@use-gesture/react");
require("./index.less");
//#region src/plus/contactInfo/components/SwipeAction/index.tsx
function withNativeProps(props, element) {
	const p = require_objectSpread2._objectSpread2({}, element.props);
	if (props.className) p.className = props.className + (element.props.className ? ` ${element.props.className}` : "");
	if (props.style) p.style = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, props.style), element.props.style);
	return 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 require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, a), b);
}
function withStopPropagation(events, element) {
	if (!events.includes("click")) return element;
	const onClick = (e) => {
		var _element$props$onClic, _element$props;
		e.stopPropagation();
		(_element$props$onClic = (_element$props = element.props).onClick) === null || _element$props$onClic === void 0 || _element$props$onClic.call(_element$props, e);
	};
	return react.default.cloneElement(element, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, element.props), {}, { onClick }));
}
const Button = ({ children, className, style, onClick }) => {
	return /* @__PURE__ */ react.default.createElement("button", {
		className,
		style: require_objectSpread2._objectSpread2({
			border: "none",
			background: (style === null || style === void 0 ? void 0 : style["--background-color"]) || "transparent"
		}, style),
		onClick
	}, children);
};
const classPrefix = `pisell-custom-swipe-action`;
const defaultProps = {
	rightActions: [],
	leftActions: [],
	closeOnTouchOutside: true,
	closeOnAction: true,
	stopPropagation: []
};
const SwipeAction = (0, react.forwardRef)((p, ref) => {
	const props = mergeProps(defaultProps, p);
	const rootRef = (0, react.useRef)(null);
	const leftRef = (0, react.useRef)(null);
	const rightRef = (0, react.useRef)(null);
	const [containerHeight, setContainerHeight] = (0, react.useState)(0);
	function getWidth(ref) {
		const element = ref.current;
		if (!element) return 0;
		return element.offsetWidth;
	}
	function getHeight(ref) {
		const element = ref.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, _react_spring_web.useSpring)(() => ({
		x: 0,
		config: {
			tension: 200,
			friction: 30
		}
	}), []);
	const draggingRef = (0, react.useRef)(false);
	const dragCancelRef = (0, react.useRef)(null);
	function forceCancelDrag() {
		var _dragCancelRef$curren;
		(_dragCancelRef$curren = dragCancelRef.current) === null || _dragCancelRef$curren === void 0 || _dragCancelRef$curren.call(dragCancelRef);
		draggingRef.current = false;
	}
	const bind = (0, _use_gesture_react.useDrag)((state) => {
		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) {
				var _p$onActionsReveal;
				(_p$onActionsReveal = p.onActionsReveal) === null || _p$onActionsReveal === void 0 || _p$onActionsReveal.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();
			return {
				left: -getRightWidth(),
				right: leftWidth
			};
		},
		axis: "x",
		preventScroll: true,
		pointer: { touch: true },
		triggerAllEvents: true
	});
	const close = () => {
		var _props$onClose;
		api.start({ x: 0 });
		forceCancelDrag();
		(_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);
	};
	(0, react.useImperativeHandle)(ref, () => ({
		show: (side = "right") => {
			var _p$onActionsReveal2;
			if (side === "right") api.start({ x: -getRightWidth() });
			else if (side === "left") api.start({ x: getLeftWidth() });
			(_p$onActionsReveal2 = p.onActionsReveal) === null || _p$onActionsReveal2 === void 0 || _p$onActionsReveal2.call(p, side);
		},
		close
	}));
	(0, react.useEffect)(() => {
		const updateHeight = () => {
			setContainerHeight(getRootHeight());
		};
		updateHeight();
		const resizeObserver = new ResizeObserver(updateHeight);
		if (rootRef.current) resizeObserver.observe(rootRef.current);
		return () => {
			resizeObserver.disconnect();
		};
	}, []);
	(0, react.useEffect)(() => {
		if (!props.closeOnTouchOutside) return;
		function handle(e) {
			if (e.target && props.escapeDom) {
				const container = document.querySelector(props.escapeDom);
				if (container === null || container === void 0 ? 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) {
		var _action$color, _colorRecord$color;
		const color = (_action$color = action.color) !== null && _action$color !== void 0 ? _action$color : "light";
		const _style = action.style || {};
		const buttonClass = isRightAction ? `${classPrefix}-action-button ${getRightActionButtonClass()}` : `${classPrefix}-action-button`;
		return /* @__PURE__ */ react.default.createElement(Button, {
			key: action.key,
			className: buttonClass,
			style: require_objectSpread2._objectSpread2({ "--background-color": (_colorRecord$color = colorRecord[color]) !== null && _colorRecord$color !== void 0 ? _colorRecord$color : color }, _style),
			onClick: (e) => {
				var _action$onClick, _props$onAction;
				if (props.closeOnAction) close();
				(_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action, e);
				(_props$onAction = props.onAction) === null || _props$onAction === void 0 || _props$onAction.call(props, action, e);
			}
		}, action.text);
	}
	return withNativeProps(props, /* @__PURE__ */ react.default.createElement("div", require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ className: classPrefix }, bind()), {}, {
		ref: rootRef,
		onClickCapture: (e) => {
			if (draggingRef.current) {
				e.stopPropagation();
				e.preventDefault();
			}
		}
	}), /* @__PURE__ */ react.default.createElement(_react_spring_web.animated.div, {
		className: `${classPrefix}-track`,
		style: { x }
	}, withStopPropagation(props.stopPropagation, /* @__PURE__ */ react.default.createElement("div", {
		className: `${classPrefix}-actions ${classPrefix}-actions-left`,
		ref: leftRef
	}, props.leftActions.map((action) => renderAction(action, false)))), /* @__PURE__ */ react.default.createElement("div", {
		className: `${classPrefix}-content`,
		onClickCapture: (e) => {
			if (x.goal !== 0) {
				e.preventDefault();
				e.stopPropagation();
				close();
			}
		}
	}, /* @__PURE__ */ react.default.createElement(_react_spring_web.animated.div, { style: { pointerEvents: x.to((v) => v !== 0 && x.goal !== 0 ? "none" : "auto") } }, props.children)), withStopPropagation(props.stopPropagation, /* @__PURE__ */ react.default.createElement("div", {
		className: getRightContainerClass(),
		ref: rightRef
	}, props.rightActions.map((action) => renderAction(action, true)))))));
});
const colorRecord = {
	light: "#ccc",
	weak: "#999",
	primary: "#1677ff",
	success: "#00b578",
	warning: "#ff8f1f",
	danger: "#ff3141"
};
//#endregion
exports.SwipeAction = SwipeAction;
