'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { getTranslation } from '@payloadcms/translations';
import React, { Fragment, useCallback, useMemo } from 'react';
import { toast } from 'sonner';
import { Banner } from '../../elements/Banner/index.js';
import { Button } from '../../elements/Button/index.js';
import { clipboardCopy, clipboardPaste } from '../../elements/ClipboardAction/clipboardUtilities.js';
import { ClipboardAction } from '../../elements/ClipboardAction/index.js';
import { mergeFormStateFromClipboard, reduceFormStateByPath } from '../../elements/ClipboardAction/mergeFormStateFromClipboard.js';
import { DraggableSortableItem } from '../../elements/DraggableSortable/DraggableSortableItem/index.js';
import { DraggableSortable } from '../../elements/DraggableSortable/index.js';
import { DrawerToggler } from '../../elements/Drawer/index.js';
import { useDrawerSlug } from '../../elements/Drawer/useDrawerSlug.js';
import { ErrorPill } from '../../elements/ErrorPill/index.js';
import { RenderCustomComponent } from '../../elements/RenderCustomComponent/index.js';
import { useForm, useFormSubmitted } from '../../forms/Form/context.js';
import { extractRowsAndCollapsedIDs, toggleAllRows } from '../../forms/Form/rowHelpers.js';
import { NullifyLocaleField } from '../../forms/NullifyField/index.js';
import { useField } from '../../forms/useField/index.js';
import { withCondition } from '../../forms/withCondition/index.js';
import { useConfig } from '../../providers/Config/index.js';
import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
import { useLocale } from '../../providers/Locale/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { scrollToID } from '../../utilities/scrollToID.js';
import './index.scss';
import { FieldDescription } from '../FieldDescription/index.js';
import { FieldError } from '../FieldError/index.js';
import { FieldLabel } from '../FieldLabel/index.js';
import { mergeFieldStyles } from '../mergeFieldStyles.js';
import { fieldBaseClass } from '../shared/index.js';
import { BlockRow } from './BlockRow.js';
import { BlocksDrawer } from './BlocksDrawer/index.js';
const baseClass = 'blocks-field';
const BlocksFieldComponent = (props)=>{
    const { i18n, t } = useTranslation();
    const { field, field: { name, type, admin: { className, description, isSortable = true } = {}, blockReferences, blocks, label, labels: labelsFromProps, localized, maxRows, minRows: minRowsProp, required }, path: pathFromProps, permissions, readOnly, schemaPath: schemaPathFromProps, validate } = props;
    const schemaPath = schemaPathFromProps ?? name;
    const minRows = minRowsProp ?? required ? 1 : 0;
    const { setDocFieldPreferences } = useDocumentInfo();
    const { addFieldRow, dispatchFields, getFields, moveFieldRow, removeFieldRow, replaceState, setModified } = useForm();
    const { code: locale } = useLocale();
    const { config: { localization }, config } = useConfig();
    const drawerSlug = useDrawerSlug('blocks-drawer');
    const submitted = useFormSubmitted();
    const labels = {
        plural: t('fields:blocks'),
        singular: t('fields:block'),
        ...labelsFromProps
    };
    const editingDefaultLocale = (()=>{
        if (localization && localization.fallback) {
            const defaultLocale = localization.defaultLocale;
            return locale === defaultLocale;
        }
        return true;
    })();
    const memoizedValidate = useCallback((value, options)=>{
        // alternative locales can be null
        if (!editingDefaultLocale && value === null) {
            return true;
        }
        if (typeof validate === 'function') {
            return validate(value, {
                ...options,
                maxRows,
                minRows,
                required
            });
        }
    }, [
        maxRows,
        minRows,
        required,
        validate,
        editingDefaultLocale
    ]);
    const { blocksFilterOptions, customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {}, disabled, errorPaths, path, rows = [], showError, valid, value } = useField({
        hasRows: true,
        potentiallyStalePath: pathFromProps,
        validate: memoizedValidate
    });
    const { clientBlocks, clientBlocksAfterFilter } = useMemo(()=>{
        let resolvedBlocks = [];
        if (!blockReferences) {
            resolvedBlocks = blocks;
        } else {
            for (const blockReference of blockReferences){
                const block = typeof blockReference === 'string' ? config.blocksMap[blockReference] : blockReference;
                if (block) {
                    resolvedBlocks.push(block);
                }
            }
        }
        if (Array.isArray(blocksFilterOptions)) {
            const clientBlocksAfterFilter = resolvedBlocks.filter((block)=>{
                const blockSlug = typeof block === 'string' ? block : block.slug;
                return blocksFilterOptions.includes(blockSlug);
            });
            return {
                clientBlocks: resolvedBlocks,
                clientBlocksAfterFilter
            };
        }
        return {
            clientBlocks: resolvedBlocks,
            clientBlocksAfterFilter: resolvedBlocks
        };
    }, [
        blockReferences,
        blocks,
        blocksFilterOptions,
        config.blocksMap
    ]);
    const addRow = useCallback((rowIndex, blockType)=>{
        addFieldRow({
            blockType,
            path,
            rowIndex,
            schemaPath
        });
        setTimeout(()=>{
            scrollToID(`${path}-row-${rowIndex + 1}`);
        }, 0);
    }, [
        addFieldRow,
        path,
        schemaPath
    ]);
    const duplicateRow = useCallback((rowIndex)=>{
        dispatchFields({
            type: 'DUPLICATE_ROW',
            path,
            rowIndex
        });
        setModified(true);
        setTimeout(()=>{
            scrollToID(`${path}-row-${rowIndex + 1}`);
        }, 0);
    }, [
        dispatchFields,
        path,
        setModified
    ]);
    const removeRow = useCallback((rowIndex)=>{
        removeFieldRow({
            path,
            rowIndex
        });
    }, [
        path,
        removeFieldRow
    ]);
    const moveRow = useCallback((moveFromIndex, moveToIndex)=>{
        moveFieldRow({
            moveFromIndex,
            moveToIndex,
            path
        });
    }, [
        moveFieldRow,
        path
    ]);
    const toggleCollapseAll = useCallback((collapsed)=>{
        const { collapsedIDs, updatedRows } = toggleAllRows({
            collapsed,
            rows
        });
        dispatchFields({
            type: 'SET_ALL_ROWS_COLLAPSED',
            path,
            updatedRows
        });
        setDocFieldPreferences(path, {
            collapsed: collapsedIDs
        });
    }, [
        dispatchFields,
        path,
        rows,
        setDocFieldPreferences
    ]);
    const setCollapse = useCallback((rowID, collapsed)=>{
        const { collapsedIDs, updatedRows } = extractRowsAndCollapsedIDs({
            collapsed,
            rowID,
            rows
        });
        dispatchFields({
            type: 'SET_ROW_COLLAPSED',
            path,
            updatedRows
        });
        setDocFieldPreferences(path, {
            collapsed: collapsedIDs
        });
    }, [
        dispatchFields,
        path,
        rows,
        setDocFieldPreferences
    ]);
    const copyRow = useCallback((rowIndex)=>{
        const clipboardResult = clipboardCopy({
            type,
            blocks: clientBlocks,
            getDataToCopy: ()=>reduceFormStateByPath({
                    formState: {
                        ...getFields()
                    },
                    path,
                    rowIndex
                }),
            path,
            rowIndex,
            t
        });
        if (typeof clipboardResult === 'string') {
            toast.error(clipboardResult);
        } else {
            toast.success(t('general:copied'));
        }
    }, [
        clientBlocks,
        path,
        t,
        type,
        getFields
    ]);
    const pasteRow = useCallback((rowIndex)=>{
        const pasteArgs = {
            onPaste: (dataFromClipboard)=>{
                const formState = {
                    ...getFields()
                };
                const newState = mergeFormStateFromClipboard({
                    dataFromClipboard,
                    formState,
                    path,
                    rowIndex
                });
                replaceState(newState);
                setModified(true);
            },
            path,
            schemaBlocks: clientBlocks,
            t
        };
        const clipboardResult = clipboardPaste(pasteArgs);
        if (typeof clipboardResult === 'string') {
            toast.error(clipboardResult);
        }
    }, [
        clientBlocks,
        getFields,
        path,
        replaceState,
        setModified,
        t
    ]);
    const pasteBlocks = useCallback((dataFromClipboard)=>{
        const formState = {
            ...getFields()
        };
        const newState = mergeFormStateFromClipboard({
            dataFromClipboard,
            formState,
            path
        });
        replaceState(newState);
        setModified(true);
    }, [
        getFields,
        path,
        replaceState,
        setModified
    ]);
    const hasMaxRows = maxRows && rows.length >= maxRows;
    const fieldErrorCount = errorPaths.length;
    const fieldHasErrors = submitted && fieldErrorCount + (valid ? 0 : 1) > 0;
    const showMinRows = rows.length < minRows || required && rows.length === 0;
    const showRequired = readOnly && rows.length === 0;
    const styles = useMemo(()=>mergeFieldStyles(field), [
        field
    ]);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: [
            fieldBaseClass,
            baseClass,
            className,
            fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`
        ].filter(Boolean).join(' '),
        id: `field-${path?.replace(/\./g, '__')}`,
        style: styles,
        children: [
            showError && /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                CustomComponent: Error,
                Fallback: /*#__PURE__*/ _jsxDEV(FieldError, {
                    path: path,
                    showError: showError
                }, void 0, false, {
                    fileName: "src/fields/Blocks/index.tsx",
                    lineNumber: 333,
                    columnNumber: 21
                }, void 0)
            }, void 0, false, {
                fileName: "src/fields/Blocks/index.tsx",
                lineNumber: 331,
                columnNumber: 9
            }, this),
            /*#__PURE__*/ _jsxDEV("header", {
                className: `${baseClass}__header`,
                children: [
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__header-wrap`,
                        children: [
                            /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__heading-with-error`,
                                children: [
                                    /*#__PURE__*/ _jsxDEV("h3", {
                                        children: /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                                            CustomComponent: Label,
                                            Fallback: /*#__PURE__*/ _jsxDEV(FieldLabel, {
                                                as: "span",
                                                label: label,
                                                localized: localized,
                                                path: path,
                                                required: required
                                            }, void 0, false, {
                                                fileName: "src/fields/Blocks/index.tsx",
                                                lineNumber: 343,
                                                columnNumber: 19
                                            }, void 0)
                                        }, void 0, false, {
                                            fileName: "src/fields/Blocks/index.tsx",
                                            lineNumber: 340,
                                            columnNumber: 15
                                        }, this)
                                    }, void 0, false, {
                                        fileName: "src/fields/Blocks/index.tsx",
                                        lineNumber: 339,
                                        columnNumber: 13
                                    }, this),
                                    fieldHasErrors && fieldErrorCount > 0 && /*#__PURE__*/ _jsxDEV(ErrorPill, {
                                        count: fieldErrorCount,
                                        i18n: i18n,
                                        withMessage: true
                                    }, void 0, false, {
                                        fileName: "src/fields/Blocks/index.tsx",
                                        lineNumber: 354,
                                        columnNumber: 15
                                    }, this)
                                ]
                            }, void 0, true, {
                                fileName: "src/fields/Blocks/index.tsx",
                                lineNumber: 338,
                                columnNumber: 11
                            }, this),
                            /*#__PURE__*/ _jsxDEV("ul", {
                                className: `${baseClass}__header-actions`,
                                children: [
                                    rows.length > 0 && /*#__PURE__*/ _jsxDEV(Fragment, {
                                        children: [
                                            /*#__PURE__*/ _jsxDEV("li", {
                                                children: /*#__PURE__*/ _jsxDEV("button", {
                                                    className: `${baseClass}__header-action`,
                                                    onClick: ()=>toggleCollapseAll(true),
                                                    type: "button",
                                                    children: t('fields:collapseAll')
                                                }, void 0, false, {
                                                    fileName: "src/fields/Blocks/index.tsx",
                                                    lineNumber: 361,
                                                    columnNumber: 19
                                                }, this)
                                            }, void 0, false, {
                                                fileName: "src/fields/Blocks/index.tsx",
                                                lineNumber: 360,
                                                columnNumber: 17
                                            }, this),
                                            /*#__PURE__*/ _jsxDEV("li", {
                                                children: /*#__PURE__*/ _jsxDEV("button", {
                                                    className: `${baseClass}__header-action`,
                                                    onClick: ()=>toggleCollapseAll(false),
                                                    type: "button",
                                                    children: t('fields:showAll')
                                                }, void 0, false, {
                                                    fileName: "src/fields/Blocks/index.tsx",
                                                    lineNumber: 370,
                                                    columnNumber: 19
                                                }, this)
                                            }, void 0, false, {
                                                fileName: "src/fields/Blocks/index.tsx",
                                                lineNumber: 369,
                                                columnNumber: 17
                                            }, this)
                                        ]
                                    }, void 0, true, {
                                        fileName: "src/fields/Blocks/index.tsx",
                                        lineNumber: 359,
                                        columnNumber: 15
                                    }, this),
                                    /*#__PURE__*/ _jsxDEV("li", {
                                        children: /*#__PURE__*/ _jsxDEV(ClipboardAction, {
                                            allowCopy: rows?.length > 0,
                                            allowPaste: !readOnly,
                                            blocks: clientBlocks,
                                            className: `${baseClass}__header-action`,
                                            disabled: disabled,
                                            getDataToCopy: ()=>reduceFormStateByPath({
                                                    formState: {
                                                        ...getFields()
                                                    },
                                                    path
                                                }),
                                            onPaste: pasteBlocks,
                                            path: path,
                                            type: type
                                        }, void 0, false, {
                                            fileName: "src/fields/Blocks/index.tsx",
                                            lineNumber: 381,
                                            columnNumber: 15
                                        }, this)
                                    }, void 0, false, {
                                        fileName: "src/fields/Blocks/index.tsx",
                                        lineNumber: 380,
                                        columnNumber: 13
                                    }, this)
                                ]
                            }, void 0, true, {
                                fileName: "src/fields/Blocks/index.tsx",
                                lineNumber: 357,
                                columnNumber: 11
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/fields/Blocks/index.tsx",
                        lineNumber: 337,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                        CustomComponent: Description,
                        Fallback: /*#__PURE__*/ _jsxDEV(FieldDescription, {
                            description: description,
                            path: path
                        }, void 0, false, {
                            fileName: "src/fields/Blocks/index.tsx",
                            lineNumber: 402,
                            columnNumber: 21
                        }, void 0)
                    }, void 0, false, {
                        fileName: "src/fields/Blocks/index.tsx",
                        lineNumber: 400,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/fields/Blocks/index.tsx",
                lineNumber: 336,
                columnNumber: 7
            }, this),
            BeforeInput,
            /*#__PURE__*/ _jsxDEV(NullifyLocaleField, {
                fieldValue: value,
                localized: localized,
                path: path,
                readOnly: readOnly
            }, void 0, false, {
                fileName: "src/fields/Blocks/index.tsx",
                lineNumber: 406,
                columnNumber: 7
            }, this),
            (rows.length > 0 || !valid && (showRequired || showMinRows)) && /*#__PURE__*/ _jsxDEV(DraggableSortable, {
                className: `${baseClass}__rows`,
                ids: rows.map((row)=>row.id),
                onDragEnd: ({ moveFromIndex, moveToIndex })=>moveRow(moveFromIndex, moveToIndex),
                children: [
                    rows.map((row, i)=>{
                        const { blockType, isLoading } = row;
                        const blockConfig = config.blocksMap[blockType] ?? clientBlocks.find((block)=>block.slug === blockType);
                        if (blockConfig) {
                            const rowPath = `${path}.${i}`;
                            const rowErrorCount = errorPaths.filter((errorPath)=>errorPath.startsWith(rowPath + '.')).length;
                            return /*#__PURE__*/ _jsxDEV(DraggableSortableItem, {
                                disabled: readOnly || disabled || !isSortable,
                                id: row.id,
                                children: (draggableSortableItemProps)=>/*#__PURE__*/ _jsxDEV(BlockRow, {
                                        ...draggableSortableItemProps,
                                        addRow: addRow,
                                        block: blockConfig,
                                        // Pass all blocks, not just clientBlocksAfterFilter, as existing blocks should still be displayed even if they don't match the new filter
                                        blocks: clientBlocks,
                                        copyRow: copyRow,
                                        duplicateRow: duplicateRow,
                                        errorCount: rowErrorCount,
                                        fields: blockConfig.fields,
                                        hasMaxRows: hasMaxRows,
                                        isLoading: isLoading,
                                        isSortable: isSortable,
                                        Label: rows?.[i]?.customComponents?.RowLabel,
                                        labels: labels,
                                        moveRow: moveRow,
                                        parentPath: path,
                                        pasteRow: pasteRow,
                                        path: rowPath,
                                        permissions: permissions,
                                        readOnly: readOnly || disabled,
                                        removeRow: removeRow,
                                        row: row,
                                        rowCount: rows.length,
                                        rowIndex: i,
                                        schemaPath: schemaPath + blockConfig.slug,
                                        setCollapse: setCollapse
                                    }, void 0, false, {
                                        fileName: "src/fields/Blocks/index.tsx",
                                        lineNumber: 438,
                                        columnNumber: 21
                                    }, this)
                            }, row.id, false, {
                                fileName: "src/fields/Blocks/index.tsx",
                                lineNumber: 432,
                                columnNumber: 17
                            }, this);
                        }
                        return null;
                    }),
                    !editingDefaultLocale && /*#__PURE__*/ _jsxDEV(React.Fragment, {
                        children: [
                            showMinRows && /*#__PURE__*/ _jsxDEV(Banner, {
                                type: "error",
                                children: t('validation:requiresAtLeast', {
                                    count: minRows,
                                    label: getTranslation(minRows > 1 ? labels.plural : labels.singular, i18n) || t(minRows > 1 ? 'general:row' : 'general:rows')
                                })
                            }, void 0, false, {
                                fileName: "src/fields/Blocks/index.tsx",
                                lineNumber: 476,
                                columnNumber: 17
                            }, this),
                            showRequired && /*#__PURE__*/ _jsxDEV(Banner, {
                                children: t('validation:fieldHasNo', {
                                    label: getTranslation(labels.plural, i18n)
                                })
                            }, void 0, false, {
                                fileName: "src/fields/Blocks/index.tsx",
                                lineNumber: 486,
                                columnNumber: 17
                            }, this)
                        ]
                    }, void 0, true, {
                        fileName: "src/fields/Blocks/index.tsx",
                        lineNumber: 474,
                        columnNumber: 13
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/fields/Blocks/index.tsx",
                lineNumber: 413,
                columnNumber: 9
            }, this),
            !hasMaxRows && /*#__PURE__*/ _jsxDEV(Fragment, {
                children: [
                    /*#__PURE__*/ _jsxDEV(DrawerToggler, {
                        className: `${baseClass}__drawer-toggler`,
                        disabled: readOnly || disabled,
                        slug: drawerSlug,
                        children: /*#__PURE__*/ _jsxDEV(Button, {
                            buttonStyle: "icon-label",
                            disabled: readOnly || disabled,
                            el: "span",
                            icon: "plus",
                            iconPosition: "left",
                            iconStyle: "with-border",
                            children: t('fields:addLabel', {
                                label: getTranslation(labels.singular, i18n)
                            })
                        }, void 0, false, {
                            fileName: "src/fields/Blocks/index.tsx",
                            lineNumber: 501,
                            columnNumber: 13
                        }, this)
                    }, void 0, false, {
                        fileName: "src/fields/Blocks/index.tsx",
                        lineNumber: 496,
                        columnNumber: 11
                    }, this),
                    /*#__PURE__*/ _jsxDEV(BlocksDrawer, {
                        addRow: addRow,
                        addRowIndex: rows?.length || 0,
                        // Only allow choosing filtered blocks
                        blocks: clientBlocksAfterFilter,
                        drawerSlug: drawerSlug,
                        labels: labels
                    }, void 0, false, {
                        fileName: "src/fields/Blocks/index.tsx",
                        lineNumber: 512,
                        columnNumber: 11
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/fields/Blocks/index.tsx",
                lineNumber: 495,
                columnNumber: 9
            }, this),
            AfterInput
        ]
    }, void 0, true, {
        fileName: "src/fields/Blocks/index.tsx",
        lineNumber: 318,
        columnNumber: 5
    }, this);
};
export const BlocksField = withCondition(BlocksFieldComponent);

//# sourceMappingURL=index.js.map