'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import { groupHasName } from 'payload/shared';
import React, { useMemo } from 'react';
import { useCollapsible } from '../../elements/Collapsible/provider.js';
import { ErrorPill } from '../../elements/ErrorPill/index.js';
import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
import { FieldDescription } from '../../fields/FieldDescription/index.js';
import { FieldLabel } from '../../fields/FieldLabel/index.js';
import { useFormSubmitted } from '../../forms/Form/context.js';
import { RenderFields } from '../../forms/RenderFields/index.js';
import { useField } from '../../forms/useField/index.js';
import { withCondition } from '../../forms/withCondition/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { mergeFieldStyles } from '../mergeFieldStyles.js';
import './index.scss';
import { useRow } from '../Row/provider.js';
import { fieldBaseClass } from '../shared/index.js';
import { useTabs } from '../Tabs/provider.js';
import { GroupProvider, useGroup } from './provider.js';
const baseClass = 'group-field';
export const GroupFieldComponent = (props)=>{
    const { field, field: { admin: { className, description, hideGutter } = {}, fields, label }, indexPath, parentPath, parentSchemaPath, path, permissions, readOnly, schemaPath: schemaPathFromProps } = props;
    const schemaPath = schemaPathFromProps ?? (field.type === 'group' && groupHasName(field) ? field.name : path);
    const { i18n } = useTranslation();
    const { isWithinCollapsible } = useCollapsible();
    const isWithinGroup = useGroup();
    const isWithinRow = useRow();
    const isWithinTab = useTabs();
    const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, errorPaths } = useField({
        path
    });
    const submitted = useFormSubmitted();
    const errorCount = errorPaths.length;
    const fieldHasErrors = submitted && errorCount > 0;
    const isTopLevel = !(isWithinCollapsible || isWithinGroup || isWithinRow);
    const styles = useMemo(()=>mergeFieldStyles(field), [
        field
    ]);
    return /*#__PURE__*/ _jsxDEV("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: styles,
        children: [
            /*#__PURE__*/ _jsxDEV(GroupProvider, {
                children: /*#__PURE__*/ _jsxDEV("div", {
                    className: `${baseClass}__wrap`,
                    children: [
                        Boolean(Label || Description || label || fieldHasErrors) && /*#__PURE__*/ _jsxDEV("div", {
                            className: `${baseClass}__header`,
                            children: [
                                Boolean(Label || Description || label) && /*#__PURE__*/ _jsxDEV("header", {
                                    children: [
                                        /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                                            CustomComponent: Label,
                                            Fallback: /*#__PURE__*/ _jsxDEV("h3", {
                                                className: `${baseClass}__title`,
                                                children: /*#__PURE__*/ _jsxDEV(FieldLabel, {
                                                    as: "span",
                                                    label: getTranslation(label, i18n),
                                                    localized: false,
                                                    path: path,
                                                    required: false
                                                }, void 0, false, {
                                                    fileName: "src/fields/Group/index.tsx",
                                                    lineNumber: 90,
                                                    columnNumber: 25
                                                }, void 0)
                                            }, void 0, false, {
                                                fileName: "src/fields/Group/index.tsx",
                                                lineNumber: 89,
                                                columnNumber: 23
                                            }, void 0)
                                        }, void 0, false, {
                                            fileName: "src/fields/Group/index.tsx",
                                            lineNumber: 86,
                                            columnNumber: 19
                                        }, this),
                                        /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                                            CustomComponent: Description,
                                            Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
                                                description: description,
                                                path: path
                                            }, void 0, false, {
                                                fileName: "src/fields/Group/index.tsx",
                                                lineNumber: 102,
                                                columnNumber: 31
                                            }, void 0)
                                        }, void 0, false, {
                                            fileName: "src/fields/Group/index.tsx",
                                            lineNumber: 100,
                                            columnNumber: 19
                                        }, this)
                                    ]
                                }, void 0, true, {
                                    fileName: "src/fields/Group/index.tsx",
                                    lineNumber: 85,
                                    columnNumber: 17
                                }, this),
                                fieldHasErrors && /*#__PURE__*/ _jsxDEV(ErrorPill, {
                                    count: errorCount,
                                    i18n: i18n,
                                    withMessage: true
                                }, void 0, false, {
                                    fileName: "src/fields/Group/index.tsx",
                                    lineNumber: 106,
                                    columnNumber: 34
                                }, this)
                            ]
                        }, void 0, true, {
                            fileName: "src/fields/Group/index.tsx",
                            lineNumber: 83,
                            columnNumber: 13
                        }, this),
                        BeforeInput,
                        /* Render an unnamed group differently */ groupHasName(field) ? /*#__PURE__*/ _jsxDEV(RenderFields, {
                            fields: fields,
                            margins: "small",
                            parentIndexPath: "",
                            parentPath: path,
                            parentSchemaPath: schemaPath,
                            permissions: permissions === true ? permissions : permissions?.fields,
                            readOnly: readOnly
                        }, void 0, false, {
                            fileName: "src/fields/Group/index.tsx",
                            lineNumber: 112,
                            columnNumber: 13
                        }, this) : /*#__PURE__*/ _jsxDEV(RenderFields, {
                            fields: fields,
                            margins: "small",
                            parentIndexPath: indexPath,
                            parentPath: parentPath,
                            parentSchemaPath: parentSchemaPath,
                            permissions: permissions,
                            readOnly: readOnly
                        }, void 0, false, {
                            fileName: "src/fields/Group/index.tsx",
                            lineNumber: 122,
                            columnNumber: 13
                        }, this)
                    ]
                }, void 0, true, {
                    fileName: "src/fields/Group/index.tsx",
                    lineNumber: 81,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/fields/Group/index.tsx",
                lineNumber: 80,
                columnNumber: 7
            }, this),
            AfterInput
        ]
    }, void 0, true, {
        fileName: "src/fields/Group/index.tsx",
        lineNumber: 62,
        columnNumber: 5
    }, this);
};
export { GroupProvider, useGroup };
export const GroupField = withCondition(GroupFieldComponent);

//# sourceMappingURL=index.js.map