import { getTranslation } from '@payloadcms/translations';
import React from 'react';
import { ArrayAction } from '../../../elements/ArrayAction/index.js';
import { Collapsible } from '../../../elements/Collapsible/index.js';
import { ErrorPill } from '../../../elements/ErrorPill/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import { FieldPathProvider } from '../../FieldPathProvider/index.js';
import { useFormSubmitted } from '../../Form/context.js';
import RenderFields from '../../RenderFields/index.js';
import HiddenInput from '../HiddenInput/index.js';
const baseClass = 'array-field';
export const ArrayRow = ({ addRow, attributes, duplicateRow, fieldMap, forceRender = false, hasMaxRows, labels, listeners, moveRow, path: parentPath, readOnly, removeRow, row, rowCount, rowIndex, setCollapse, setNodeRef, transform })=>{
    const path = `${parentPath}.${rowIndex}`;
    const { i18n } = useTranslation();
    const hasSubmitted = useFormSubmitted();
    const fallbackLabel = `${getTranslation(labels.singular, i18n)} ${String(rowIndex + 1).padStart(2, '0')}`;
    const errorCount = row.errorPaths?.size;
    const fieldHasErrors = errorCount > 0 && hasSubmitted;
    const classNames = [
        `${baseClass}__row`,
        fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`
    ].filter(Boolean).join(' ');
    return /*#__PURE__*/ React.createElement("div", {
        id: `${parentPath.split('.').join('-')}-row-${rowIndex}`,
        key: `${parentPath}-row-${row.id}`,
        ref: setNodeRef,
        style: {
            transform
        }
    }, /*#__PURE__*/ React.createElement(Collapsible, {
        actions: !readOnly ? /*#__PURE__*/ React.createElement(ArrayAction, {
            addRow: addRow,
            duplicateRow: duplicateRow,
            hasMaxRows: hasMaxRows,
            index: rowIndex,
            moveRow: moveRow,
            removeRow: removeRow,
            rowCount: rowCount
        }) : undefined,
        className: classNames,
        collapsed: row.collapsed,
        collapsibleStyle: fieldHasErrors ? 'error' : 'default',
        dragHandleProps: {
            id: row.id,
            attributes,
            listeners
        },
        header: /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__row-header`
        }, fieldHasErrors && /*#__PURE__*/ React.createElement(ErrorPill, {
            count: errorCount,
            i18n: i18n,
            withMessage: true
        })),
        onToggle: (collapsed)=>setCollapse(row.id, collapsed)
    }, /*#__PURE__*/ React.createElement(HiddenInput, {
        name: `${path}.id`,
        value: row.id
    }), /*#__PURE__*/ React.createElement(FieldPathProvider, {
        path: path,
        schemaPath: parentPath
    }, /*#__PURE__*/ React.createElement(RenderFields, {
        className: `${baseClass}__fields`,
        fieldMap: fieldMap,
        forceRender: forceRender,
        // indexPath={indexPath}
        margins: "small"
    }))));
};

//# sourceMappingURL=ArrayRow.js.map