import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../hooks/useEngineContext.js";
import React, { useCallback, useEffect, useMemo, useRef } from "react";
//#region src/responsive/ResponsiveEditWrapper.tsx
/** 长按触发的毫秒数 */
const LONG_PRESS_MS = 600;
/** 移动取消阈值（避免滚动被误识别为长按） */
const MOVE_CANCEL_PX = 8;
/** 兜底白名单（仅当插件不可用时使用，与 terra 的 DEFAULT_EDITABLE_FIELDS 同步） */
const FALLBACK_EDITABLE_FIELDS = [
	"variant",
	"className",
	"id",
	"style"
];
/**
* 编辑模式下包裹响应式组件，提供长按 → 弹出配置面板 的能力
*
* **运行时引用规则**：通过 `app.responsive.publishEditOpen(payload)` 发布事件，
* **不直接 import 事件常量与 pubsub**；类型走 `import type`（编译期擦除）。
*
* 行为：
*  - 仅在 `withResponsive` 检测到 `editMode === true` 时才会被使用；
*  - 监听 pointerdown 启动 600ms 计时；pointermove（位移 > 8px）/ pointerup / pointercancel 取消；
*  - 触发时 `e.preventDefault()` 阻止默认行为，再调用 `app.responsive.publishEditOpen(payload)` 通知面板；
*  - 加 1px 虚线轮廓辅助识别。
*
* @example
* <ResponsiveEditWrapper
*   node={{ componentName: 'OrderItem', id: 'cart-1', className: 'order-item' }}
*   finalProps={mergedProps}
* >
*   <OrderItem {...mergedProps} />
* </ResponsiveEditWrapper>
*/
const ResponsiveEditWrapper = ({ children, node, finalProps, editableFields, as, className, style }) => {
	var _appHelper, _getApp;
	const context = useEngineContext();
	const getApp = context === null || context === void 0 || (_appHelper = context.appHelper) === null || _appHelper === void 0 || (_appHelper = _appHelper.utils) === null || _appHelper === void 0 ? void 0 : _appHelper.getApp;
	const app = getApp === null || getApp === void 0 || (_getApp = getApp()) === null || _getApp === void 0 ? void 0 : _getApp.app;
	const timerRef = useRef(null);
	const startPointRef = useRef(null);
	const cancel = useCallback(() => {
		if (timerRef.current != null) {
			clearTimeout(timerRef.current);
			timerRef.current = null;
		}
		startPointRef.current = null;
	}, []);
	useEffect(() => () => cancel(), [cancel]);
	const handlePointerDown = useCallback((e) => {
		cancel();
		startPointRef.current = {
			x: e.clientX,
			y: e.clientY
		};
		const ev = e.nativeEvent;
		timerRef.current = setTimeout(() => {
			var _plugin$getInfo$curre, _plugin$getInfo;
			timerRef.current = null;
			try {
				var _ev$preventDefault;
				(_ev$preventDefault = ev.preventDefault) === null || _ev$preventDefault === void 0 || _ev$preventDefault.call(ev);
			} catch (_unused) {}
			const plugin = app === null || app === void 0 ? void 0 : app.responsive;
			const currentBreakpoint = typeof (plugin === null || plugin === void 0 ? void 0 : plugin.getInfo) === "function" ? (_plugin$getInfo$curre = (_plugin$getInfo = plugin.getInfo()) === null || _plugin$getInfo === void 0 ? void 0 : _plugin$getInfo.currentBreakpoint) !== null && _plugin$getInfo$curre !== void 0 ? _plugin$getInfo$curre : "" : "";
			const fields = (typeof (plugin === null || plugin === void 0 ? void 0 : plugin.getEditableFieldsFor) === "function" ? plugin.getEditableFieldsFor(node, { extra: editableFields }) : void 0) || (editableFields && editableFields.length ? [...editableFields] : [...FALLBACK_EDITABLE_FIELDS]);
			const payload = {
				componentName: node.componentName,
				id: node.id,
				className: node.className,
				props: finalProps,
				currentBreakpoint,
				editableFields: fields
			};
			if (typeof (plugin === null || plugin === void 0 ? void 0 : plugin.publishEditOpen) === "function") plugin.publishEditOpen(payload);
		}, LONG_PRESS_MS);
	}, [
		app,
		cancel,
		node,
		finalProps,
		editableFields
	]);
	const handlePointerMove = useCallback((e) => {
		const start = startPointRef.current;
		if (!start) return;
		const dx = e.clientX - start.x;
		const dy = e.clientY - start.y;
		if (Math.hypot(dx, dy) > MOVE_CANCEL_PX) cancel();
	}, [cancel]);
	const wrapperStyle = useMemo(() => _objectSpread2({
		outline: "1px dashed rgba(24, 144, 255, 0.6)",
		outlineOffset: -1,
		cursor: "pointer",
		WebkitUserSelect: "none",
		userSelect: "none",
		WebkitTouchCallout: "none"
	}, style), [style]);
	const Tag = as || "div";
	return /* @__PURE__ */ React.createElement(Tag, {
		className,
		style: wrapperStyle,
		onPointerDown: handlePointerDown,
		onPointerMove: handlePointerMove,
		onPointerUp: cancel,
		onPointerCancel: cancel,
		onPointerLeave: cancel,
		"data-responsive-edit": "1",
		"data-component-name": node.componentName || void 0,
		"data-component-id": node.id || void 0
	}, children);
};
//#endregion
export { ResponsiveEditWrapper as default };
