'use client';
import { getTranslation } from '@payloadcms/translations';
import React from 'react';
import { Collapsible } from '../../../elements/Collapsible/index.js';
import { ErrorPill } from '../../../elements/ErrorPill/index.js';
import Pill from '../../../elements/Pill/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';
import { RowActions } from './RowActions.js';
import SectionTitle from './SectionTitle/index.js';
const baseClass = 'blocks-field';
export const BlockRow = ({ addRow, attributes, block, blocks, duplicateRow, forceRender, hasMaxRows, indexPath, labels, listeners, moveRow, path: parentPath, permissions, readOnly, removeRow, row, rowCount, rowIndex, schemaPath, setCollapse, setNodeRef, transform })=>{
    const path = `${parentPath}.${rowIndex}`;
    const { i18n } = useTranslation();
    const hasSubmitted = useFormSubmitted();
    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-${rowIndex}`,
        ref: setNodeRef,
        style: {
            transform
        }
    }, /*#__PURE__*/ React.createElement(Collapsible, {
        actions: !readOnly ? /*#__PURE__*/ React.createElement(RowActions, {
            addRow: addRow,
            blockType: row.blockType,
            blocks: blocks,
            duplicateRow: duplicateRow,
            fieldMap: block.subfields,
            hasMaxRows: hasMaxRows,
            labels: labels,
            moveRow: moveRow,
            removeRow: removeRow,
            rowCount: rowCount,
            rowIndex: rowIndex
        }) : undefined,
        className: classNames,
        collapsed: row.collapsed,
        collapsibleStyle: fieldHasErrors ? 'error' : 'default',
        dragHandleProps: {
            id: row.id,
            attributes,
            listeners
        },
        header: /*#__PURE__*/ React.createElement("div", {
            className: `${baseClass}__block-header`
        }, /*#__PURE__*/ React.createElement("span", {
            className: `${baseClass}__block-number`
        }, String(rowIndex + 1).padStart(2, '0')), /*#__PURE__*/ React.createElement(Pill, {
            className: `${baseClass}__block-pill ${baseClass}__block-pill-${row.blockType}`,
            pillStyle: "white"
        }, getTranslation(block.labels.singular, i18n)), /*#__PURE__*/ React.createElement(SectionTitle, {
            path: `${path}.blockName`,
            readOnly: readOnly
        }), fieldHasErrors && /*#__PURE__*/ React.createElement(ErrorPill, {
            count: errorCount,
            i18n: i18n,
            withMessage: true
        })),
        key: row.id,
        onToggle: (collapsed)=>setCollapse(row.id, collapsed)
    }, /*#__PURE__*/ React.createElement(HiddenInput, {
        name: `${path}.id`,
        value: row.id
    }), /*#__PURE__*/ React.createElement(FieldPathProvider, {
        path: path,
        schemaPath: `${schemaPath}.${block.slug}`
    }, /*#__PURE__*/ React.createElement(RenderFields, {
        className: `${baseClass}__fields`,
        fieldMap: block.subfields,
        forceRender: forceRender,
        // indexPath={indexPath}
        margins: "small"
    }))));
};

//# sourceMappingURL=BlockRow.js.map