'use client';
import React, { Fragment } from 'react';
import { useCollapsible } from '../../../elements/Collapsible/provider.js';
import { ErrorPill } from '../../../elements/ErrorPill/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import { FieldPathProvider, useFieldPath } from '../../FieldPathProvider/index.js';
import LabelComp from '../../Label/index.js';
import RenderFields from '../../RenderFields/index.js';
import { WatchChildErrors } from '../../WatchChildErrors/index.js';
import { withCondition } from '../../withCondition/index.js';
import { useRow } from '../Row/provider.js';
import { useTabs } from '../Tabs/provider.js';
import { fieldBaseClass } from '../shared.js';
import { GroupProvider, useGroup } from './provider.js';
const baseClass = 'group-field';
const Group = (props)=>{
    const { name, Description, Label: LabelFromProps, className, fieldMap, hideGutter, label, required, style, width } = props;
    const Label = LabelFromProps || /*#__PURE__*/ React.createElement(LabelComp, {
        label: label,
        required: required
    });
    const { path, schemaPath } = useFieldPath();
    const { i18n } = useTranslation();
    const isWithinCollapsible = useCollapsible();
    const isWithinGroup = useGroup();
    const isWithinRow = useRow();
    const isWithinTab = useTabs();
    const [errorCount, setErrorCount] = React.useState(undefined);
    const fieldHasErrors = errorCount > 0;
    const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow);
    return /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement(WatchChildErrors, {
        fieldMap: fieldMap,
        path: path,
        setErrorCount: setErrorCount
    }), /*#__PURE__*/ React.createElement("div", {
        className: [
            fieldBaseClass,
            baseClass,
            isTopLevel && `${baseClass}--top-level`,
            isWithinCollapsible && `${baseClass}--within-collapsible`,
            isWithinGroup && `${baseClass}--within-group`,
            isWithinRow && `${baseClass}--within-row`,
            isWithinTab && `${baseClass}--within-tab`,
            !hideGutter && isWithinGroup && `${baseClass}--gutter`,
            fieldHasErrors && `${baseClass}--has-error`,
            className
        ].filter(Boolean).join(' '),
        id: `field-${path?.replace(/\./g, '__')}`,
        style: {
            ...style,
            width
        }
    }, /*#__PURE__*/ React.createElement(FieldPathProvider, {
        path: path,
        schemaPath: schemaPath
    }, /*#__PURE__*/ React.createElement(GroupProvider, null, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__wrap`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__header`
    }, (Label || Description) && /*#__PURE__*/ React.createElement("header", null, Label, Description), fieldHasErrors && /*#__PURE__*/ React.createElement(ErrorPill, {
        count: errorCount,
        i18n: i18n,
        withMessage: true
    })), /*#__PURE__*/ React.createElement(RenderFields, {
        fieldMap: fieldMap
    }))))));
};
export default withCondition(Group);

//# sourceMappingURL=index.js.map