const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_usePisellConfig = require("../../../pisell-config-provider/hooks/usePisellConfig.js");
const require_useFormSetting = require("../provider/hooks/useFormSetting.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let ahooks = require("ahooks");
require("./index.less");
//#region src/components/dataSourceComponents/dataSourceForm/group/index.tsx
/**
* @title: 表单分组组件
* @description: 用于在表单中划分分组，支持标题、描述、背景色等配置
* @return: *
* @Author: shengjie.zuo
* @Date: 2024-11-25 17:14:25
*/
const FormGroup = (props) => {
	const { title, description, showTitle: propsShowTitle, showDescription: propsShowDescription, showBackgroundColor, backgroundColor: propsBackgroundColor, children } = props;
	const ref = (0, react.useRef)(null);
	const size = (0, ahooks.useSize)(ref);
	const { groupInfoPosition: formSettingGroupInfoPosition } = require_useFormSetting.default();
	const { platform } = require_usePisellConfig.default();
	const groupInfoPosition = (0, react.useMemo)(() => {
		if (platform === "h5" || ((size === null || size === void 0 ? void 0 : size.width) || 0) < 500) return "top";
		return formSettingGroupInfoPosition;
	}, [
		platform,
		formSettingGroupInfoPosition,
		size === null || size === void 0 ? void 0 : size.width
	]);
	const backgroundColor = showBackgroundColor ? propsBackgroundColor : void 0;
	const wrapperStyle = (0, react.useMemo)(() => {
		return { backgroundColor: groupInfoPosition === "side" ? void 0 : backgroundColor };
	}, [groupInfoPosition, backgroundColor]);
	const contentStyle = (0, react.useMemo)(() => {
		return { backgroundColor: groupInfoPosition === "side" ? backgroundColor : void 0 };
	}, [groupInfoPosition, backgroundColor]);
	return /* @__PURE__ */ react.default.createElement("div", {
		style: wrapperStyle,
		className: (0, classnames.default)("pisell-lowcode-data-source-form-group", {
			"pisell-lowcode-data-source-form-group-top": groupInfoPosition === "top",
			"pisell-lowcode-data-source-form-group-side": groupInfoPosition === "side"
		}),
		ref
	}, /* @__PURE__ */ react.default.createElement(antd.Row, {
		style: { flex: 1 },
		gutter: 16
	}, /* @__PURE__ */ react.default.createElement(antd.Col, { span: groupInfoPosition === "top" ? 24 : 6 }, (propsShowTitle && title || propsShowDescription && description) && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-data-source-form-group-info" }, propsShowTitle && title && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-data-source-form-group-title" }, title), propsShowDescription && description && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-lowcode-data-source-form-group-description" }, description))), /* @__PURE__ */ react.default.createElement(antd.Col, { span: groupInfoPosition === "top" ? 24 : 18 }, /* @__PURE__ */ react.default.createElement("div", {
		className: "pisell-lowcode-data-source-form-group-content",
		style: contentStyle
	}, children))));
};
//#endregion
exports.default = FormGroup;
