function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useCallback, useRef, useState } from 'react';
/** 跟手时禁用 transition，避免 css 过渡把每帧位移卡住；松手时恢复 0.2s ease 用于回弹 / 退场。 */
var DRAG_TRANSITION_NONE = 'none';
var SETTLE_TRANSITION = 'transform 0.2s ease-out';

/**
 * 抽屉顶端的「抓手 + 拍击区」：
 * - 视觉上是一条居中的胶囊形 bar，给用户一个「这里可以拖 / 可以点」的暗示；
 * - 点击：直接关闭抽屉；
 * - 指针下拖：传入 drawerRef 时，面板会实时跟随手指下移；
 *     • 松手时位移 ≥ closeOffsetPx → 平滑滑出底部并关闭；
 *     • 否则回弹到原位。
 *
 * 直接 mutate `drawerRef.current.style.transform` 而不是走 React state，是因为
 * 拖动每一帧都重渲染整个抽屉（PisellRecordBoard + 表格）开销太大。命令式风格
 * 把动画限制在 DOM 层、React 树不参与，掉帧风险最小。组件卸载 / 关闭后由抽屉
 * 节点本身被 unmount 一并清理，不留残留 inline style。
 */
export var ReservationHudDrawerHandle = function ReservationHudDrawerHandle(_ref) {
  var onClose = _ref.onClose,
    _ref$closeOffsetPx = _ref.closeOffsetPx,
    closeOffsetPx = _ref$closeOffsetPx === void 0 ? 80 : _ref$closeOffsetPx,
    drawerRef = _ref.drawerRef;
  var startYRef = useRef(null);
  var movedRef = useRef(false);
  var lastDyRef = useRef(0);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    dragging = _useState2[0],
    setDragging = _useState2[1];

  /** 工具：把抽屉位移到 dy（仅向下），dy<=0 视为 0；dragging=true 时不带过渡。 */
  var applyDrawerTranslate = useCallback(function (dy, withTransition) {
    var el = drawerRef === null || drawerRef === void 0 ? void 0 : drawerRef.current;
    if (!el) return;
    var clamped = dy < 0 ? 0 : dy;
    el.style.transition = withTransition ? SETTLE_TRANSITION : DRAG_TRANSITION_NONE;
    el.style.transform = clamped === 0 ? '' : "translateY(".concat(clamped, "px)");
  }, [drawerRef]);

  /** 把抽屉 inline 样式抹回去，回到 LESS 控制（含入场动画 keyframes）的稳态。 */
  var resetDrawerTranslate = useCallback(function () {
    var el = drawerRef === null || drawerRef === void 0 ? void 0 : drawerRef.current;
    if (!el) return;
    el.style.transition = '';
    el.style.transform = '';
  }, [drawerRef]);
  var handlePointerDown = useCallback(function (event) {
    // 仅响应左键 / 主指针，忽略右键与多指附加触点
    if (event.button !== 0) return;
    startYRef.current = event.clientY;
    movedRef.current = false;
    lastDyRef.current = 0;
    setDragging(true);
    event.currentTarget.setPointerCapture(event.pointerId);
  }, []);
  var handlePointerMove = useCallback(function (event) {
    var startY = startYRef.current;
    if (startY == null) return;
    var dy = event.clientY - startY;
    lastDyRef.current = dy;
    // 任何 > 4px 的位移视为「真的拖了」，避免微抖动误判为点击
    if (Math.abs(dy) > 4) movedRef.current = true;
    // 只跟随「向下」的拖动；向上拖把面板顶到屏幕外没有意义且会破坏阴影边界
    if (dy > 0) applyDrawerTranslate(dy, false);else applyDrawerTranslate(0, false);
  }, [applyDrawerTranslate]);
  var finishGesture = useCallback(function (event) {
    var startY = startYRef.current;
    startYRef.current = null;
    setDragging(false);
    try {
      event.currentTarget.releasePointerCapture(event.pointerId);
    } catch (_unused) {
      // 部分浏览器在 pointercancel 之后再次 release 会抛错；忽略。
    }
    if (startY == null) {
      resetDrawerTranslate();
      return;
    }
    var dy = lastDyRef.current;
    // 没真动 → 视为 click，直接关
    if (!movedRef.current) {
      resetDrawerTranslate();
      onClose();
      return;
    }
    // 真的拖了：超过阈值就「滑出底部」再 onClose；否则带过渡回弹到原位
    if (dy >= closeOffsetPx) {
      var _el = drawerRef === null || drawerRef === void 0 ? void 0 : drawerRef.current;
      if (_el) {
        // 把面板继续往下推到完全离开视口，再触发关闭；离场动画与回弹复用同一过渡
        _el.style.transition = SETTLE_TRANSITION;
        _el.style.transform = 'translateY(100%)';
        // 等过渡跑完再调用 onClose；用 200ms 与 SETTLE_TRANSITION 时长保持一致
        window.setTimeout(function () {
          onClose();
          // onClose 后 React 会卸载抽屉节点，inline style 自然消失，无需再 reset
        }, 200);
      } else {
        onClose();
      }
      return;
    }
    // 阈值内：回弹
    applyDrawerTranslate(0, true);
    // 过渡结束后撕掉 inline transition，避免后续状态变化被这条过渡拖累
    var el = drawerRef === null || drawerRef === void 0 ? void 0 : drawerRef.current;
    if (el) {
      var cleanup = function cleanup() {
        el.style.transition = '';
        el.removeEventListener('transitionend', cleanup);
      };
      el.addEventListener('transitionend', cleanup);
    }
  }, [applyDrawerTranslate, closeOffsetPx, drawerRef, onClose, resetDrawerTranslate]);
  var handleKeyDown = useCallback(function (event) {
    // 键盘可达性：Enter / Space 触发关闭，等同点击
    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"
  }));
};
export default ReservationHudDrawerHandle;