import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import PisellLayout from "../../pisellLayout/index.js";
import { mergeClassNames } from "../utils/classNames.js";
import { isFooterInContent, isFooterInSidebar } from "../utils/footerPosition.js";
import { generateRatioStyles } from "../utils/layoutRatio.js";
import ProcedureContent from "./ProcedureContent.js";
import ProcedureSidebar from "./ProcedureSidebar.js";
import ProcedureFooter from "./ProcedureFooter.js";
import React, { useMemo } from "react";
//#region src/components/PisellProcedure/components/ProcedureBody.tsx
/**
* ProcedureBody 主体区域组件
* 
* @description 包含内容区和信息区的布局容器，支持固定宽度和比例两种布局模式
* @author Pisell Team
*/
const ProcedureBody = ({ bodyProps, footerProps, footerPosition, showFooter = true, showSidebar = true, className, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext, mode = "page", containerSize, responsiveClsComputed }) => {
	/** 排列方向，默认为横向 */
	const direction = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.direction) || "horizontal";
	/** 内容顺序，默认为内容区在前 */
	const contentOrder = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentOrder) || "content-first";
	/** 布局模式，默认为固定宽度 */
	const layoutMode = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.layoutMode) || "fixed";
	/** 布局比例，默认为 7:3 */
	const layoutRatio = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.layoutRatio) || "7:3";
	/** 主体区域类名 */
	const bodyCls = useMemo(() => {
		return mergeClassNames("pisell-procedure-body", className, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className, `pisell-procedure-body--${direction}`, `pisell-procedure-body--${layoutMode}`, `pisell-procedure-body--${contentOrder}`);
	}, [
		className,
		bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className,
		direction,
		layoutMode,
		contentOrder
	]);
	/** 计算比例布局样式 */
	const ratioStyles = useMemo(() => {
		if (layoutMode !== "ratio") return null;
		return generateRatioStyles(layoutRatio, 16);
	}, [layoutMode, layoutRatio]);
	/** 内容区样式（合并比例样式和用户自定义样式） */
	const contentStyle = useMemo(() => {
		if (layoutMode === "ratio" && ratioStyles) return _objectSpread2(_objectSpread2({}, ratioStyles.contentStyle), bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentStyle);
		return bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentStyle;
	}, [
		layoutMode,
		ratioStyles,
		bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentStyle
	]);
	/** 信息区样式（合并比例样式和用户自定义样式） */
	const sidebarStyle = useMemo(() => {
		if (layoutMode === "ratio" && ratioStyles) return _objectSpread2(_objectSpread2({}, ratioStyles.sidebarStyle), bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarStyle);
		return bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarStyle;
	}, [
		layoutMode,
		ratioStyles,
		bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarStyle
	]);
	/** 信息区内容（用于移动端弹窗显示） */
	const sidebarContent = bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarSlot;
	/** 内容区底部 */
	const contentFooter = useMemo(() => {
		if (!showFooter || !isFooterInContent(footerPosition)) return null;
		return /* @__PURE__ */ React.createElement(ProcedureFooter, {
			footerProps,
			position: footerPosition,
			sidebarContent,
			summaryModalOpen,
			onOpenSummaryModal,
			onCloseSummaryModal,
			goPrev,
			goNext,
			mode
		});
	}, [
		showFooter,
		footerPosition,
		footerProps,
		sidebarContent,
		summaryModalOpen,
		onOpenSummaryModal,
		onCloseSummaryModal,
		goPrev,
		goNext,
		mode
	]);
	/** 信息区底部 */
	const sidebarFooter = useMemo(() => {
		if (!showFooter || !isFooterInSidebar(footerPosition)) return null;
		return /* @__PURE__ */ React.createElement(ProcedureFooter, {
			footerProps,
			position: footerPosition,
			sidebarContent,
			summaryModalOpen,
			onOpenSummaryModal,
			onCloseSummaryModal,
			goPrev,
			goNext,
			mode
		});
	}, [
		showFooter,
		footerPosition,
		footerProps,
		sidebarContent,
		summaryModalOpen,
		onOpenSummaryModal,
		onCloseSummaryModal,
		goPrev,
		goNext,
		mode
	]);
	/** PisellLayout 样式（根据排列方向设置 flex-direction） */
	const layoutStyle = useMemo(() => ({ flexDirection: direction === "vertical" ? "column" : "row" }), [direction]);
	/** 内容区组件 */
	const contentComponent = /* @__PURE__ */ React.createElement(ProcedureContent, {
		className: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentClassName,
		style: contentStyle,
		extra: contentFooter
	}, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentSlot);
	/** 信息区组件 */
	const sidebarComponent = showSidebar ? /* @__PURE__ */ React.createElement(ProcedureSidebar, {
		className: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarClassName,
		style: sidebarStyle,
		extra: sidebarFooter,
		isRatioMode: layoutMode === "ratio",
		containerSelector: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarContainerSelector,
		mode,
		direction,
		containerSize,
		responsiveClsComputed
	}, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarSlot) : null;
	/** 根据 contentOrder 决定渲染顺序 */
	const orderedChildren = useMemo(() => {
		if (contentOrder === "sidebar-first") return [sidebarComponent, contentComponent].filter(Boolean);
		return [contentComponent, sidebarComponent].filter(Boolean);
	}, [
		contentOrder,
		contentComponent,
		sidebarComponent
	]);
	return /* @__PURE__ */ React.createElement("div", {
		className: bodyCls,
		style: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.style
	}, /* @__PURE__ */ React.createElement(PisellLayout, { style: layoutStyle }, orderedChildren));
};
ProcedureBody.displayName = "ProcedureBody";
//#endregion
export { ProcedureBody as default };
