'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
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 { ShimmerEffect } from '../../elements/ShimmerEffect/index.js';
import { useFormSubmitted } from '../../forms/Form/context.js';
import { RenderFields } from '../../forms/RenderFields/index.js';
import { RowLabel } from '../../forms/RowLabel/index.js';
import { useThrottledValue } from '../../hooks/useThrottledValue.js';
import { useTranslation } from '../../providers/Translation/index.js';
import './index.scss';
const baseClass = 'array-field';
export const ArrayRow = ({ addRow, attributes, copyRow, CustomRowLabel, duplicateRow, errorCount, fields, forceRender = false, hasMaxRows, isDragging, isLoading: isLoadingFromProps, isSortable, labels, listeners, moveRow, parentPath, pasteRow, path, permissions, readOnly, removeRow, row, rowCount, rowIndex, schemaPath, scrollIdPrefix, setCollapse, setNodeRef, transform, transition })=>{
    const isLoading = useThrottledValue(isLoadingFromProps, 500);
    const { i18n } = useTranslation();
    const hasSubmitted = useFormSubmitted();
    const fallbackLabel = `${getTranslation(labels.singular, i18n)} ${String(rowIndex + 1).padStart(2, '0')}`;
    const fieldHasErrors = errorCount > 0 && hasSubmitted;
    const classNames = [
        `${baseClass}__row`,
        fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`
    ].filter(Boolean).join(' ');
    return /*#__PURE__*/ _jsxDEV("div", {
        id: `${parentPath.split('.').join('-')}-row-${rowIndex}`,
        ref: setNodeRef,
        style: {
            transform,
            transition,
            zIndex: isDragging ? 1 : undefined
        },
        children: /*#__PURE__*/ _jsxDEV(Collapsible, {
            actions: !readOnly ? /*#__PURE__*/ _jsxDEV(ArrayAction, {
                addRow: addRow,
                copyRow: copyRow,
                duplicateRow: duplicateRow,
                hasMaxRows: hasMaxRows,
                index: rowIndex,
                isSortable: isSortable,
                moveRow: moveRow,
                pasteRow: pasteRow,
                removeRow: removeRow,
                rowCount: rowCount
            }, void 0, false, {
                fileName: "src/fields/Array/ArrayRow.tsx",
                lineNumber: 120,
                columnNumber: 13
            }, void 0) : undefined,
            className: classNames,
            collapsibleStyle: fieldHasErrors ? 'error' : 'default',
            dragHandleProps: isSortable ? {
                id: row.id,
                attributes,
                listeners
            } : undefined,
            header: /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__row-header`,
                id: `${scrollIdPrefix}-row-${rowIndex}`,
                children: [
                    isLoading ? /*#__PURE__*/ _jsxDEV(ShimmerEffect, {
                        height: "1rem",
                        width: "8rem"
                    }, void 0, false, {
                        fileName: "src/fields/Array/ArrayRow.tsx",
                        lineNumber: 151,
                        columnNumber: 15
                    }, void 0) : /*#__PURE__*/ _jsxDEV(RowLabel, {
                        CustomComponent: CustomRowLabel,
                        label: fallbackLabel,
                        path: path,
                        rowNumber: rowIndex
                    }, void 0, false, {
                        fileName: "src/fields/Array/ArrayRow.tsx",
                        lineNumber: 153,
                        columnNumber: 15
                    }, void 0),
                    fieldHasErrors && /*#__PURE__*/ _jsxDEV(ErrorPill, {
                        count: errorCount,
                        i18n: i18n,
                        withMessage: true
                    }, void 0, false, {
                        fileName: "src/fields/Array/ArrayRow.tsx",
                        lineNumber: 160,
                        columnNumber: 32
                    }, void 0)
                ]
            }, void 0, true, {
                fileName: "src/fields/Array/ArrayRow.tsx",
                lineNumber: 146,
                columnNumber: 11
            }, void 0),
            isCollapsed: row.collapsed,
            onToggle: (collapsed)=>setCollapse(row.id, collapsed),
            children: isLoading ? /*#__PURE__*/ _jsxDEV(ShimmerEffect, {}, void 0, false, {
                fileName: "src/fields/Array/ArrayRow.tsx",
                lineNumber: 167,
                columnNumber: 11
            }, this) : /*#__PURE__*/ _jsxDEV(RenderFields, {
                className: `${baseClass}__fields`,
                fields: fields,
                forceRender: forceRender,
                margins: "small",
                parentIndexPath: "",
                parentPath: path,
                parentSchemaPath: schemaPath,
                permissions: permissions === true ? permissions : permissions?.fields,
                readOnly: readOnly
            }, void 0, false, {
                fileName: "src/fields/Array/ArrayRow.tsx",
                lineNumber: 169,
                columnNumber: 11
            }, this)
        }, void 0, false, {
            fileName: "src/fields/Array/ArrayRow.tsx",
            lineNumber: 117,
            columnNumber: 7
        }, this)
    }, `${parentPath}-row-${row.id}`, false, {
        fileName: "src/fields/Array/ArrayRow.tsx",
        lineNumber: 107,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=ArrayRow.js.map