import PisellSider from "../../pisellLayout/sider.js";
import { mergeClassNames } from "../utils/classNames.js";
import { useElementSize } from "../hooks/useElementSize.js";
import { useSidebarHeight } from "../hooks/useSidebarHeight.js";
import React, { useEffect, useMemo } from "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 = useElementSize({
		selector: ".pisell-procedure-header",
		enabled: !isVertical
	});
	const floatAllFooterSize = useElementSize({
		selector: ".pisell-procedure-footer--float-all",
		enabled: !isVertical
	});
	const fixedBottomFooterSize = 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;
	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 = useSidebarHeight(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 = useMemo(() => {
		return mergeClassNames("pisell-procedure-sidebar", className, isRatioMode && "pisell-procedure-sidebar--ratio");
	}, [
		className,
		isRatioMode,
		mode === "modal" ? responsiveClsComputed : ""
	]);
	useMemo(() => {
		if (mode === "modal") return "100%";
		if (siderHeight && siderHeight > 0) return `${siderHeight}px`;
	}, [mode, siderHeight]);
	return /* @__PURE__ */ React.createElement(PisellSider, { className: sidebarCls }, /* @__PURE__ */ React.createElement("div", { className: "pisell-procedure-sider-content-top" }, children), extra);
};
ProcedureSidebar.displayName = "ProcedureSidebar";
//#endregion
export { ProcedureSidebar as default };
