"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const React = require("react");
const classNames = require("../_util/classNames.js");
const index$2 = require("../../icon/react-icon/IconLeft/index.js");
const index$3 = require("../../icon/react-icon/IconRight/index.js");
const index = require("../ConfigProvider/index.js");
const index$1 = require("../ResizeBox/index.js");
const is = require("../_util/is.js");
const responsiveObserve = require("../_util/responsiveObserve.js");
const useMergeValue = require("../_util/hooks/useMergeValue.js");
const emotionReactJsxRuntime_browser_esm = require("../../../../../../@emotion_react@11.10.4_3toe27fv7etiytxb5kxc7fxaw4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js");
var __assign = globalThis && globalThis.__assign || function() {
  __assign = Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s)
        if (Object.prototype.hasOwnProperty.call(s, p))
          t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
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 SiderContext = React.createContext({
  siderCollapsed: false,
  collapsedWidth: 64
});
var generateId = function() {
  var i = 0;
  return function(prefix) {
    if (prefix === void 0) {
      prefix = "";
    }
    i += 1;
    return "" + prefix + i;
  };
}();
function Sider(props, ref) {
  var _a;
  var _b;
  var children = props.children, className = props.className, style = props.style, _c = props.theme, theme = _c === void 0 ? "light" : _c, trigger = props.trigger, reverseArrow = props.reverseArrow, _d = props.collapsedWidth, collapsedWidth = _d === void 0 ? 48 : _d, _e = props.width, width = _e === void 0 ? 200 : _e, collapsible = props.collapsible, resizeDirections = props.resizeDirections, onSiderMount = props.onSiderMount, onSiderUnmount = props.onSiderUnmount, breakpoint = props.breakpoint, onBreakpoint = props.onBreakpoint, onCollapse = props.onCollapse, _f = props.resizeBoxProps, resizeBoxProps = _f === void 0 ? {} : _f;
  var uniqueId = generateId("arco-sider-");
  var getPrefixCls = React.useContext(index.ConfigContext).getPrefixCls;
  var prefixCls = getPrefixCls("layout-sider");
  var _g = __read(useMergeValue(false, {
    value: props.collapsed
  }), 2), collapsed = _g[0], setCollapsed = _g[1];
  var propsWidth = is.isNumber(width) ? width + "px" : String(width);
  var _h = __read(React.useState(propsWidth), 2), siderWidth = _h[0], setSiderWidth = _h[1];
  var refResponsiveHandlerToken = React.useRef(null);
  var refStateForResponsiveHandler = React.useRef(null);
  refStateForResponsiveHandler.current = {
    breakpoint,
    collapsed,
    onCollapse,
    onBreakpoint
  };
  React.useEffect(function() {
    onSiderMount && onSiderMount(uniqueId);
    if (collapsible && breakpoint in responsiveObserve.responsiveMap) {
      refResponsiveHandlerToken.current = responsiveObserve.default.subscribe(function(screens, breakpointChecked) {
        var _a2 = refStateForResponsiveHandler.current, breakpoint2 = _a2.breakpoint, collapsed2 = _a2.collapsed, onCollapse2 = _a2.onCollapse, onBreakpoint2 = _a2.onBreakpoint;
        if (!breakpointChecked || breakpointChecked === breakpoint2) {
          var nextCollapsed = !screens[breakpoint2];
          if (nextCollapsed !== collapsed2) {
            setCollapsed(nextCollapsed);
            onCollapse2 && onCollapse2(nextCollapsed, "responsive");
          }
          onBreakpoint2 && onBreakpoint2(nextCollapsed);
        }
      });
    }
    return function() {
      onSiderUnmount && onSiderUnmount(uniqueId);
      if (refResponsiveHandlerToken.current) {
        responsiveObserve.default.unsubscribe(refResponsiveHandlerToken.current);
      }
    };
  }, []);
  React.useEffect(function() {
    var _collapsedWidth = is.isNumber(collapsedWidth) ? collapsedWidth + "px" : String(collapsedWidth);
    setSiderWidth(collapsed ? _collapsedWidth : propsWidth);
  }, [collapsed, propsWidth, collapsedWidth]);
  var resizable = resizeDirections && is.isArray(resizeDirections) || ((_b = resizeBoxProps.directions) === null || _b === void 0 ? void 0 : _b.length);
  var TagName = resizable ? index$1 : "aside";
  var renderTrigger = function() {
    var _a2;
    var triggerIcon = trigger || (collapsed ? reverseArrow ? /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(index$2, {}) : /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(index$3, {}) : reverseArrow ? /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(index$3, {}) : /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(index$2, {}));
    return collapsible && trigger !== null ? /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("div", {
      style: {
        width: siderWidth
      },
      className: classNames(prefixCls + "-trigger", (_a2 = {}, _a2[prefixCls + "-trigger-light"] = theme === "light", _a2)),
      onClick: function() {
        setCollapsed(!collapsed);
        onCollapse && onCollapse(!collapsed, "clickTrigger");
      },
      children: triggerIcon
    }) : null;
  };
  var resizeProps = React.useMemo(function() {
    if (resizable) {
      return __assign(__assign({
        component: "aside",
        onMoving: function(_, _a2) {
          var currentWidth = _a2.width;
          setSiderWidth(currentWidth);
        }
      }, resizeBoxProps), {
        width: siderWidth,
        directions: resizeDirections
      });
    }
    return {};
  }, [resizable, resizeDirections, siderWidth, resizeBoxProps]);
  return /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(SiderContext.Provider, {
    value: {
      siderCollapsed: collapsed,
      collapsedWidth
    },
    children: /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs(TagName, {
      ...__assign({
        ref,
        style: __assign({
          width: siderWidth
        }, style),
        className: classNames(prefixCls, (_a = {}, _a[prefixCls + "-light"] = theme === "light", _a[prefixCls + "-has-trigger"] = trigger !== null && collapsible, _a[prefixCls + "-collapsed"] = collapsed, _a), className)
      }, resizeProps),
      children: [/* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("div", {
        className: prefixCls + "-children",
        children
      }), renderTrigger()]
    })
  });
}
var SiderComponent = React.forwardRef(Sider);
SiderComponent.defaultProps = {
  sign: "sider"
};
SiderComponent.displayName = "LayoutSider";
exports.SiderContext = SiderContext;
exports.default = SiderComponent;
//# sourceMappingURL=sider.js.map
