import usePisellConfig from "../../../pisell-config-provider/hooks/usePisellConfig.js";
import useFormSetting from "../provider/hooks/useFormSetting.js";
import React, { useMemo, useRef } from "react";
import { Col, Row } from "antd";
import classNames from "classnames";
import { useSize } from "ahooks";
import "./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 = useRef(null);
	const size = useSize(ref);
	const { groupInfoPosition: formSettingGroupInfoPosition } = useFormSetting();
	const { platform } = usePisellConfig();
	const groupInfoPosition = 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 = useMemo(() => {
		return { backgroundColor: groupInfoPosition === "side" ? void 0 : backgroundColor };
	}, [groupInfoPosition, backgroundColor]);
	const contentStyle = useMemo(() => {
		return { backgroundColor: groupInfoPosition === "side" ? backgroundColor : void 0 };
	}, [groupInfoPosition, backgroundColor]);
	return /* @__PURE__ */ React.createElement("div", {
		style: wrapperStyle,
		className: classNames("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.createElement(Row, {
		style: { flex: 1 },
		gutter: 16
	}, /* @__PURE__ */ React.createElement(Col, { span: groupInfoPosition === "top" ? 24 : 6 }, (propsShowTitle && title || propsShowDescription && description) && /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode-data-source-form-group-info" }, propsShowTitle && title && /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode-data-source-form-group-title" }, title), propsShowDescription && description && /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode-data-source-form-group-description" }, description))), /* @__PURE__ */ React.createElement(Col, { span: groupInfoPosition === "top" ? 24 : 18 }, /* @__PURE__ */ React.createElement("div", {
		className: "pisell-lowcode-data-source-form-group-content",
		style: contentStyle
	}, children))));
};
//#endregion
export { FormGroup as default };
