import { forwardRef, useContext, useState, useRef, useImperativeHandle, useEffect } from "react";
import cs from "../_util/classNames.js";
import ResizeTrigger from "./resize-trigger.js";
import { ConfigContext } from "../ConfigProvider/index.js";
import { on, off } from "../_util/dom.js";
import useIsomorphicLayoutEffect from "../_util/hooks/useIsomorphicLayoutEffect.js";
import { jsx, jsxs } from "../../../../../../@emotion_react@11.10.4_3toe27fv7etiytxb5kxc7fxaw4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js";
var __read = globalThis && globalThis.__read || function(o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m)
    return o;
  var i = m.call(o), r, ar = [], e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
      ar.push(r.value);
  } catch (error) {
    e = {
      error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"]))
        m.call(i);
    } finally {
      if (e)
        throw e.error;
    }
  }
  return ar;
};
var DIRECTION_HORIZONTAL = "horizontal";
var DIRECTION_VERTICAL = "vertical";
function Split(props, ref) {
  var _a;
  var style = props.style, className = props.className, _b = props.component, component = _b === void 0 ? "div" : _b, _c = props.direction, direction = _c === void 0 ? "horizontal" : _c, icon = props.icon, _d = props.size, size = _d === void 0 ? 0.5 : _d, min = props.min, max = props.max, panes = props.panes, disabled = props.disabled, trigger = props.trigger;
  var _e = useContext(ConfigContext), getPrefixCls = _e.getPrefixCls, rtl = _e.rtl;
  var prefixCls = getPrefixCls("resizebox-split");
  var isHorizontal = direction.includes(DIRECTION_HORIZONTAL);
  var isReverse = direction.includes("reverse");
  var rtlReverse = isHorizontal && rtl;
  var isTriggerHorizontal = !isHorizontal;
  var classNames = cs(prefixCls, prefixCls + "-" + (isHorizontal ? DIRECTION_HORIZONTAL : DIRECTION_VERTICAL), (_a = {}, _a[prefixCls + "-rtl"] = rtl, _a), className);
  var _f = __read(panes, 2), firstPane = _f[0], secondPane = _f[1];
  var isPxSize = typeof size === "string";
  var _g = __read(useState(parseFloat(size)), 2), offset = _g[0], setOffset = _g[1];
  var _h = __read(useState(0), 2), triggerSize = _h[0], setTriggerSize = _h[1];
  var recordRef = useRef({
    startX: 0,
    startY: 0,
    startWidth: 0,
    startHeight: 0,
    startOffset: 0,
    moving: false
  });
  var wrapperRef = useRef();
  var paneContainers = useRef([]);
  useImperativeHandle(ref, function() {
    return wrapperRef.current;
  }, []);
  function px2percent(numerator, denominator) {
    return parseFloat(numerator) / parseFloat(denominator);
  }
  function getOffset(startSize, startOffset, startPosition, currentPosition) {
    var minOffset = min ? parseFloat(min) : 0;
    var maxOffset = max ? parseFloat(max) : isPxSize ? startSize : 1;
    var ratio = isReverse ? -1 : 1;
    var rtlRatio = rtlReverse ? -1 : 1;
    ratio *= rtlRatio;
    var moveOffset = isPxSize ? startOffset + (currentPosition - startPosition) * ratio : px2percent(startSize * startOffset + (currentPosition - startPosition) * ratio, startSize);
    moveOffset = Math.max(moveOffset, minOffset);
    moveOffset = Math.min(moveOffset, maxOffset);
    return moveOffset;
  }
  function onTriggerMouseDown(e) {
    var _a2, _b2;
    props.onMovingStart && props.onMovingStart();
    recordRef.current.moving = true;
    recordRef.current.startX = e.pageX;
    recordRef.current.startY = e.pageY;
    recordRef.current.startWidth = (_a2 = wrapperRef.current) === null || _a2 === void 0 ? void 0 : _a2.offsetWidth;
    recordRef.current.startHeight = (_b2 = wrapperRef.current) === null || _b2 === void 0 ? void 0 : _b2.offsetHeight;
    recordRef.current.startOffset = offset;
    on(window, "mousemove", moving);
    on(window, "touchmove", moving);
    on(window, "mouseup", moveEnd);
    on(window, "touchend", moveEnd);
    on(window, "contextmenu", moveEnd);
    document.body.style.cursor = isTriggerHorizontal ? "row-resize" : "col-resize";
  }
  function moving(e) {
    if (recordRef.current.moving) {
      var newOffset = isHorizontal ? getOffset(recordRef.current.startWidth, recordRef.current.startOffset, recordRef.current.startX, e.pageX) : getOffset(recordRef.current.startHeight, recordRef.current.startOffset, recordRef.current.startY, e.pageY);
      setOffset(newOffset);
      props.onMoving && props.onMoving(e, isPxSize ? newOffset + "px" : newOffset);
    }
  }
  function moveEnd() {
    recordRef.current.moving = false;
    off(window, "mousemove", moving);
    off(window, "touchmove", moving);
    off(window, "mouseup", moveEnd);
    off(window, "touchend", moveEnd);
    off(window, "contextmenu", moveEnd);
    document.body.style.cursor = "default";
    props.onMovingEnd && props.onMovingEnd();
  }
  function onTriggerResize(e) {
    var contentRect = e[0].contentRect;
    var newTriggerSize = contentRect[isTriggerHorizontal ? "height" : "width"];
    setTriggerSize(newTriggerSize);
  }
  function getFirstPaneSize() {
    var unit = isPxSize ? "px" : "%";
    if (!offset)
      return "0" + unit;
    var baseVal = isPxSize ? offset : offset * 100;
    return "calc(" + baseVal + unit + " - " + triggerSize / 2 + "px)";
  }
  useEffect(function() {
    props.onPaneResize && props.onPaneResize(paneContainers.current);
  }, [offset, triggerSize]);
  useIsomorphicLayoutEffect(function() {
    var newOffset = parseFloat(size);
    if (offset !== newOffset) {
      setOffset(newOffset);
    }
  }, [size]);
  var Tag = component;
  var firstPaneNode = /* @__PURE__ */ jsx("div", {
    className: cs(prefixCls + "-pane", "first-pane"),
    style: {
      flexBasis: getFirstPaneSize()
    },
    ref: function(el) {
      paneContainers.current[0] = el;
    },
    children: firstPane
  });
  var secondPaneNode = /* @__PURE__ */ jsx("div", {
    className: cs(prefixCls + "-pane", "second-pane"),
    ref: function(el) {
      paneContainers.current[1] = el;
    },
    children: secondPane
  });
  var paneNodeArr = isReverse ? [secondPaneNode, firstPaneNode] : [firstPaneNode, secondPaneNode];
  return /* @__PURE__ */ jsxs(Tag, {
    style,
    className: classNames,
    ref: wrapperRef,
    children: [paneNodeArr[0], !disabled && /* @__PURE__ */ jsx(ResizeTrigger, {
      className: prefixCls + "-trigger",
      direction: isTriggerHorizontal ? DIRECTION_HORIZONTAL : DIRECTION_VERTICAL,
      icon,
      onMouseDown: onTriggerMouseDown,
      onResize: onTriggerResize,
      children: trigger
    }), paneNodeArr[1]]
  });
}
var SplitComponent = forwardRef(Split);
SplitComponent.displayName = "ResizeBoxSplit";
const Split$1 = SplitComponent;
export {
  Split$1 as default
};
//# sourceMappingURL=split.js.map
