"use strict";

exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var Dialog = _interopRequireWildcard(require("@radix-ui/react-dialog"));
var _DrawerSt = require("./Drawer.st.css.js");
var _Drawer = require("./Drawer.constants");
var _ZIndex = require("../common/ZIndex");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Drawer/Drawer.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var Drawer = _ref => {
  var {
    open,
    backdrop = true,
    renderBackdrop = true,
    resizable = true,
    margin = true,
    onClose,
    role = 'dialog',
    ariaLabelledBy,
    snapPoints = [1],
    children,
    dismissible = true,
    dataHook,
    zIndex = _ZIndex.ZIndex.popover,
    scrollable = true,
    repositionInputs = true
  } = _ref;
  var contentRef = (0, _react.useRef)(null);
  var restingY = (0, _react.useRef)(0);
  var dragState = (0, _react.useRef)({
    isDragging: false,
    startY: 0,
    startTranslateY: 0,
    currentDelta: 0
  });
  (0, _react.useEffect)(() => {
    if (!open || !repositionInputs || typeof window === 'undefined' || !window.visualViewport) {
      return;
    }
    var viewport = window.visualViewport;
    var el = contentRef.current;
    var onViewportResize = () => {
      if (!el) return;
      var keyboardHeight = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop);
      el.style.bottom = keyboardHeight > 0 ? "".concat(keyboardHeight, "px") : '';
    };
    viewport.addEventListener('resize', onViewportResize);
    return () => {
      viewport.removeEventListener('resize', onViewportResize);
      if (el) {
        el.style.bottom = '';
      }
    };
  }, [open, repositionInputs]);
  var resolveSnapPoint = snap => {
    var value = typeof snap === 'string' ? parseFloat(snap.replace('px', '')) : snap;
    if (value <= 1) {
      var _contentRef$current$c, _contentRef$current;
      return value * ((_contentRef$current$c = (_contentRef$current = contentRef.current) == null ? void 0 : _contentRef$current.clientHeight) !== null && _contentRef$current$c !== void 0 ? _contentRef$current$c : window.innerHeight);
    }
    return value;
  };
  var animateToY = (fromY, toY, onDone) => {
    var el = contentRef.current;
    if (!el) return;
    el.style.animation = 'none';

    // Check needed for JSDOM environment, since animation api isn't implemented
    if (typeof el.animate !== 'function') {
      el.style.transform = toY === 0 ? '' : "translateY(".concat(toY, "px)");
      el.style.animation = '';
      restingY.current = toY;
      onDone == null || onDone();
      return;
    }
    var anim = el.animate([{
      transform: "translateY(".concat(fromY, "px)")
    }, {
      transform: "translateY(".concat(toY, "px)")
    }], {
      duration: 300,
      easing: 'ease'
    });
    anim.onfinish = () => {
      el.style.transform = toY === 0 ? '' : "translateY(".concat(toY, "px)");
      if (onDone) {
        onDone();
      } else {
        el.style.animation = '';
        restingY.current = toY;
      }
    };
  };
  var onHandlePointerDown = e => {
    e.currentTarget.setPointerCapture(e.pointerId);
    dragState.current = {
      isDragging: true,
      startY: e.clientY,
      startTranslateY: restingY.current,
      currentDelta: 0
    };
    if (contentRef.current) {
      contentRef.current.style.animation = 'none';
      contentRef.current.style.transition = 'none';
    }
  };
  var onHandlePointerMove = e => {
    if (!dragState.current.isDragging) return;
    var delta = e.clientY - dragState.current.startY;
    dragState.current.currentDelta = delta;
    var newY = Math.max(0, dragState.current.startTranslateY + delta);
    if (contentRef.current) {
      contentRef.current.style.transform = "translateY(".concat(newY, "px)");
    }
  };
  var onHandlePointerUp = () => {
    if (!dragState.current.isDragging) return;
    dragState.current.isDragging = false;
    var el = contentRef.current;
    if (!el) return;
    var contentHeight = el.offsetHeight;
    var currentY = Math.max(0, dragState.current.startTranslateY + dragState.current.currentDelta);
    var resolvedSnaps = snapPoints.map(resolveSnapPoint).sort((a, b) => a - b);
    var visibleHeight = contentHeight - currentY;
    var lowestSnap = resolvedSnaps[0];
    if (dismissible && visibleHeight < lowestSnap * 0.5) {
      animateToY(currentY, contentHeight, () => onClose(false));
      return;
    }
    var nearest = resolvedSnaps[0];
    var minDist = Infinity;
    for (var snap of resolvedSnaps) {
      var dist = Math.abs(visibleHeight - snap);
      if (dist < minDist) {
        minDist = dist;
        nearest = snap;
      }
    }
    animateToY(currentY, Math.max(0, contentHeight - nearest));
  };
  var handleDismiss = e => {
    e.preventDefault();
    if (!dismissible) return;
    var el = contentRef.current;
    if (!el) {
      onClose(false);
      return;
    }
    animateToY(restingY.current, el.offsetHeight, () => onClose(false));
  };
  var lastAnimatedElRef = (0, _react.useRef)(null);
  var handleContentRef = (0, _react.useCallback)(el => {
    if (el && el !== lastAnimatedElRef.current) {
      contentRef.current = el;
      lastAnimatedElRef.current = el;
      if (!contentRef.current) return;
      var snapPx = resolveSnapPoint(snapPoints[0]);
      var targetY = Math.max(0, el.offsetHeight - snapPx);
      animateToY(contentRef.current.clientHeight, targetY);
    }
  }, [snapPoints]);
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": dataHook,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 197,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(Dialog.Root, {
    open: open,
    onOpenChange: onClose,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 198,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(Dialog.Portal, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 199,
      columnNumber: 9
    }
  }, renderBackdrop && /*#__PURE__*/_react.default.createElement(Dialog.Overlay, {
    "data-hook": _Drawer.DATA_HOOKS.OVERLAY,
    className: (0, _DrawerSt.st)(_DrawerSt.classes.overlay, {
      backdrop
    }),
    style: {
      zIndex
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 201,
      columnNumber: 13
    }
  }), /*#__PURE__*/_react.default.createElement(Dialog.Content, {
    ref: handleContentRef,
    "data-hook": _Drawer.DATA_HOOKS.CONTENT,
    "aria-modal": "true",
    "aria-labelledby": ariaLabelledBy,
    role: role,
    className: (0, _DrawerSt.st)(_DrawerSt.classes.content, {
      margin
    }),
    onInteractOutside: handleDismiss,
    onEscapeKeyDown: handleDismiss,
    style: {
      zIndex
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 207,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(Dialog.Title, {
    className: _DrawerSt.classes.title,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 221,
      columnNumber: 13
    }
  }), resizable && /*#__PURE__*/_react.default.createElement("div", {
    className: _DrawerSt.classes.handle,
    "data-hook": _Drawer.DATA_HOOKS.HANDLE,
    onPointerDown: onHandlePointerDown,
    onPointerMove: onHandlePointerMove,
    onPointerUp: onHandlePointerUp,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 223,
      columnNumber: 15
    }
  }), scrollable ? /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _DrawerSt.st)(_DrawerSt.classes.contentWrapper, {
      margin
    }),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 232,
      columnNumber: 15
    }
  }, children) : children))));
};
Drawer.displayName = 'Drawer';
var _default = exports.default = Drawer;
//# sourceMappingURL=Drawer.js.map