import "core-js/modules/es.array.iterator.js";
import "core-js/modules/web.dom-collections.iterator.js";
import React, { useContext } from 'react';
import { RightOutlined } from '@wii/icons';
import classNames from 'classnames';
import Space from '../../../space';
import ConfigProvider from '../../../config-provider';
import FieldContext from '../../field-context';
import { useMountMergeState } from '../../../utils';
import LabelIconTip from '../../../wau-label-icon-tip';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const Group = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    groupProps
  } = React.useContext(FieldContext);
  const {
    children,
    collapsible,
    defaultCollapsed,
    style,
    labelLayout,
    title,
    tooltip,
    direction,
    size = 32,
    titleStyle,
    titleRender,
    extra
  } = {
    ...groupProps,
    ...props
  };
  const [collapsed, setCollapsed] = useMountMergeState(() => defaultCollapsed || false, {
    value: props.collapsed,
    onChange: props.onCollapse
  });
  const {
    getPrefixCls
  } = useContext(ConfigProvider.ConfigContext);
  const className = getPrefixCls('pro-form-group');
  const collapsibleButton = collapsible && /*#__PURE__*/_jsx(RightOutlined, {
    style: {
      marginRight: 8
    },
    rotate: !collapsed ? 90 : undefined
  });
  const label = /*#__PURE__*/_jsx(LabelIconTip, {
    label: collapsibleButton ? /*#__PURE__*/_jsxs("div", {
      children: [collapsibleButton, title]
    }) : title,
    tooltip: tooltip
  });
  const titleDom = titleRender ? titleRender(label, props) : label;
  return /*#__PURE__*/_jsxs("div", {
    className: classNames(className, {
      [`${className}-twoLine`]: labelLayout === 'twoLine'
    }),
    style: style,
    ref: ref,
    children: [(title || tooltip || extra) && /*#__PURE__*/_jsx("div", {
      className: `${className}-title`,
      style: titleStyle,
      onClick: () => {
        setCollapsed(!collapsed);
      },
      children: extra ? /*#__PURE__*/_jsxs("div", {
        style: {
          display: 'flex',
          width: '100%',
          alignItems: 'center',
          justifyContent: 'space-between'
        },
        children: [titleDom, /*#__PURE__*/_jsx("span", {
          onClick: e => e.stopPropagation(),
          children: extra
        })]
      }) : titleDom
    }), collapsible && collapsed ? null : /*#__PURE__*/_jsx(Space, {
      className: `${className}-container`,
      size: size,
      direction: direction,
      children: children
    })]
  });
});
Group.displayName = 'ProForm-Group';
export default Group;