const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_sider = require("../../pisellLayout/sider.js");
const require_classNames = require("../utils/classNames.js");
const require_useElementSize = require("../hooks/useElementSize.js");
const require_useSidebarHeight = require("../hooks/useSidebarHeight.js");
let react = require("react");
react = require_runtime.__toESM(react);
//#region src/components/PisellProcedure/components/ProcedureSidebar.tsx
/**
* ProcedureSidebar 信息区组件
*
* @description 流程容器的信息区（侧边栏），用于展示摘要信息
* @author Pisell Team
*/
const ProcedureSidebar = ({ className, style, children, extra, isRatioMode = false, containerSelector, mode = "page", direction = "horizontal", containerSize, responsiveClsComputed }) => {
	const isVertical = direction === "vertical";
	const headerSize = require_useElementSize.useElementSize({
		selector: ".pisell-procedure-header",
		enabled: !isVertical
	});
	const floatAllFooterSize = require_useElementSize.useElementSize({
		selector: ".pisell-procedure-footer--float-all",
		enabled: !isVertical
	});
	const fixedBottomFooterSize = require_useElementSize.useElementSize({
		selector: ".pisell-procedure-footer--fixed-bottom",
		enabled: !isVertical
	});
	const footerHeight = Math.max((floatAllFooterSize === null || floatAllFooterSize === void 0 ? void 0 : floatAllFooterSize.height) || 0, (fixedBottomFooterSize === null || fixedBottomFooterSize === void 0 ? void 0 : fixedBottomFooterSize.height) || 0);
	const containerWidth = (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) || 0;
	(0, react.useEffect)(() => {
		if (typeof document === "undefined") return;
		const root = document.documentElement;
		if (containerWidth > 0) root.style.setProperty("--pisell-procedure-container-width", `${containerWidth}px`);
		return () => {
			root.style.removeProperty("--pisell-procedure-container-width");
		};
	}, [containerWidth]);
	const siderHeight = require_useSidebarHeight.useSidebarHeight((0, react.useMemo)(() => {
		if (isVertical) return false;
		if (!(headerSize === null || headerSize === void 0 ? void 0 : headerSize.height) || headerSize.height === 0) return false;
		if (containerSelector && containerSelector.trim()) return (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) > 0 && (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) > 0;
		return true;
	}, [
		isVertical,
		containerSelector,
		containerSize === null || containerSize === void 0 ? void 0 : containerSize.width,
		containerSize === null || containerSize === void 0 ? void 0 : containerSize.height,
		headerSize === null || headerSize === void 0 ? void 0 : headerSize.height
	]), {
		containerSelector,
		containerHeight: containerSize === null || containerSize === void 0 ? void 0 : containerSize.height,
		headerHeight: headerSize === null || headerSize === void 0 ? void 0 : headerSize.height,
		footerHeight
	});
	const sidebarCls = (0, react.useMemo)(() => {
		return require_classNames.mergeClassNames("pisell-procedure-sidebar", className, isRatioMode && "pisell-procedure-sidebar--ratio");
	}, [
		className,
		isRatioMode,
		mode === "modal" ? responsiveClsComputed : ""
	]);
	(0, react.useMemo)(() => {
		if (mode === "modal") return "100%";
		if (siderHeight && siderHeight > 0) return `${siderHeight}px`;
	}, [mode, siderHeight]);
	return /* @__PURE__ */ react.default.createElement(require_sider.default, { className: sidebarCls }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-procedure-sider-content-top" }, children), extra);
};
ProcedureSidebar.displayName = "ProcedureSidebar";
//#endregion
exports.default = ProcedureSidebar;
