import React, { useMemo } from 'react';
import classNames from 'classnames';
import useFormSetting from "../provider/hooks/useFormSetting";
import usePisellConfig from "../../../pisell-config-provider/hooks/usePisellConfig";
import "./index.less";
/**
 * @title: 表单分组组件
 * @description: 用于在表单中划分分组，支持标题、描述、背景色等配置
 * @return: *
 * @Author: shengjie.zuo
 * @Date: 2024-11-25 17:14:25
 */
var FormGroup = function FormGroup(props) {
  var title = props.title,
    description = props.description,
    propsShowTitle = props.showTitle,
    propsShowDescription = props.showDescription,
    showBackgroundColor = props.showBackgroundColor,
    propsBackgroundColor = props.backgroundColor,
    children = props.children;
  var _useFormSetting = useFormSetting(),
    formSettingGroupInfoPosition = _useFormSetting.groupInfoPosition;
  var _usePisellConfig = usePisellConfig(),
    platform = _usePisellConfig.platform;

  // 根据平台判断分组信息位置 默认移动端为top
  var groupInfoPosition = useMemo(function () {
    var isMobile = platform === 'h5';
    return isMobile ? 'top' : formSettingGroupInfoPosition;
  }, [platform, formSettingGroupInfoPosition]);

  // 根据配置决定背景色是否生效
  var backgroundColor = showBackgroundColor ? propsBackgroundColor : undefined;

  // 容器样式
  var wrapperStyle = useMemo(function () {
    return {
      backgroundColor: groupInfoPosition === 'side' ? undefined : backgroundColor
    };
  }, [groupInfoPosition, backgroundColor]);

  // 内容样式
  var contentStyle = useMemo(function () {
    return {
      backgroundColor: groupInfoPosition === 'side' ? backgroundColor : undefined
    };
  }, [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'
    })
  }, (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("div", {
    className: "pisell-lowcode-data-source-form-group-content",
    style: contentStyle
  }, children));
};
export default FormGroup;