import React, { useCallback, useRef, useState } from "react";
//#region src/plus/pisellReservation/floorMap/ReservationHudDrawerHandle.tsx
/** 跟手时禁用 transition，避免 css 过渡把每帧位移卡住；松手时恢复 0.2s ease 用于回弹 / 退场。 */
const DRAG_TRANSITION_NONE = "none";
const SETTLE_TRANSITION = "transform 0.2s ease-out";
/**
* 抽屉顶端的「抓手 + 拍击区」：
* - 视觉上是一条居中的胶囊形 bar，给用户一个「这里可以拖 / 可以点」的暗示；
* - 点击：直接关闭抽屉；
* - 指针下拖：传入 drawerRef 时，面板会实时跟随手指下移；
*     • 松手时位移 ≥ closeOffsetPx → 平滑滑出底部并关闭；
*     • 否则回弹到原位。
*
* 直接 mutate `drawerRef.current.style.transform` 而不是走 React state，是因为
* 拖动每一帧都重渲染整个抽屉（PisellRecordBoard + 表格）开销太大。命令式风格
* 把动画限制在 DOM 层、React 树不参与，掉帧风险最小。组件卸载 / 关闭后由抽屉
* 节点本身被 unmount 一并清理，不留残留 inline style。
*/
const ReservationHudDrawerHandle = ({ onClose, closeOffsetPx = 80, drawerRef }) => {
	const startYRef = useRef(null);
	const movedRef = useRef(false);
	const lastDyRef = useRef(0);
	const [dragging, setDragging] = useState(false);
	/** 工具：把抽屉位移到 dy（仅向下），dy<=0 视为 0；dragging=true 时不带过渡。 */
	const applyDrawerTranslate = useCallback((dy, withTransition) => {
		const el = drawerRef === null || drawerRef === void 0 ? void 0 : drawerRef.current;
		if (!el) return;
		const clamped = dy < 0 ? 0 : dy;
		el.style.transition = withTransition ? SETTLE_TRANSITION : DRAG_TRANSITION_NONE;
		el.style.transform = clamped === 0 ? "" : `translateY(${clamped}px)`;
	}, [drawerRef]);
	/** 把抽屉 inline 样式抹回去，回到 LESS 控制（含入场动画 keyframes）的稳态。 */
	const resetDrawerTranslate = useCallback(() => {
		const el = drawerRef === null || drawerRef === void 0 ? void 0 : drawerRef.current;
		if (!el) return;
		el.style.transition = "";
		el.style.transform = "";
	}, [drawerRef]);
	const handlePointerDown = useCallback((event) => {
		if (event.button !== 0) return;
		startYRef.current = event.clientY;
		movedRef.current = false;
		lastDyRef.current = 0;
		setDragging(true);
		event.currentTarget.setPointerCapture(event.pointerId);
	}, []);
	const handlePointerMove = useCallback((event) => {
		const startY = startYRef.current;
		if (startY == null) return;
		const dy = event.clientY - startY;
		lastDyRef.current = dy;
		if (Math.abs(dy) > 4) movedRef.current = true;
		if (dy > 0) applyDrawerTranslate(dy, false);
		else applyDrawerTranslate(0, false);
	}, [applyDrawerTranslate]);
	const finishGesture = useCallback((event) => {
		const startY = startYRef.current;
		startYRef.current = null;
		setDragging(false);
		try {
			event.currentTarget.releasePointerCapture(event.pointerId);
		} catch (_unused) {}
		if (startY == null) {
			resetDrawerTranslate();
			return;
		}
		const dy = lastDyRef.current;
		if (!movedRef.current) {
			resetDrawerTranslate();
			onClose();
			return;
		}
		if (dy >= closeOffsetPx) {
			const el = drawerRef === null || drawerRef === void 0 ? void 0 : drawerRef.current;
			if (el) {
				el.style.transition = SETTLE_TRANSITION;
				el.style.transform = "translateY(100%)";
				window.setTimeout(() => {
					onClose();
				}, 200);
			} else onClose();
			return;
		}
		applyDrawerTranslate(0, true);
		const el = drawerRef === null || drawerRef === void 0 ? void 0 : drawerRef.current;
		if (el) {
			const cleanup = () => {
				el.style.transition = "";
				el.removeEventListener("transitionend", cleanup);
			};
			el.addEventListener("transitionend", cleanup);
		}
	}, [
		applyDrawerTranslate,
		closeOffsetPx,
		drawerRef,
		onClose,
		resetDrawerTranslate
	]);
	const handleKeyDown = useCallback((event) => {
		if (event.key === "Enter" || event.key === " ") {
			event.preventDefault();
			onClose();
		}
	}, [onClose]);
	return /* @__PURE__ */ React.createElement("div", {
		className: "pisell-reservation-hud-drawer-handle" + (dragging ? " pisell-reservation-hud-drawer-handle--dragging" : ""),
		role: "button",
		tabIndex: 0,
		"aria-label": "Close drawer",
		onPointerDown: handlePointerDown,
		onPointerMove: handlePointerMove,
		onPointerUp: finishGesture,
		onPointerCancel: finishGesture,
		onKeyDown: handleKeyDown
	}, /* @__PURE__ */ React.createElement("span", {
		className: "pisell-reservation-hud-drawer-handle-bar",
		"aria-hidden": "true"
	}));
};
//#endregion
export { ReservationHudDrawerHandle as default };
