import React, { useMemo, useRef } from 'react';
import classNames from 'classnames';
import { Col, Row } from 'antd';
import { useSize } from "ahooks";
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 ref = useRef(null);
  var size = useSize(ref);
  var _useFormSetting = useFormSetting(),
    formSettingGroupInfoPosition = _useFormSetting.groupInfoPosition;
  var _usePisellConfig = usePisellConfig(),
    platform = _usePisellConfig.platform;

  // 根据平台判断分组信息位置 默认移动端为top
  var groupInfoPosition = useMemo(function () {
    var isMobile = platform === 'h5';
    if (isMobile || ((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]);

  // 根据配置决定背景色是否生效
  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'
    }),
    ref: 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))));
};
export default FormGroup;