'use client';
import { getTranslation } from '@payloadcms/translations';
import React, { Fragment, useCallback } from 'react';
import Banner from '../../../elements/Banner/index.js';
import { Button } from '../../../elements/Button/index.js';
import DraggableSortable from '../../../elements/DraggableSortable/index.js';
import DraggableSortableItem from '../../../elements/DraggableSortable/DraggableSortableItem/index.js';
import { DrawerToggler } from '../../../elements/Drawer/index.js';
import { useDrawerSlug } from '../../../elements/Drawer/useDrawerSlug.js';
import { ErrorPill } from '../../../elements/ErrorPill/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 { useForm, useFormSubmitted } from '../../Form/context.js';
import LabelComp from '../../Label/index.js';
import { NullifyLocaleField } from '../../NullifyField/index.js';
import useField from '../../useField/index.js';
import { fieldBaseClass } from '../shared.js';
import { BlockRow } from './BlockRow.js';
import { BlocksDrawer } from './BlocksDrawer/index.js';
const baseClass = 'blocks-field';
const BlocksField = (props)=>{
    const { i18n, t } = useTranslation();
    const { name, Description, Error, Label: LabelFromProps, className, forceRender = false, indexPath, label, localized, path: pathFromProps, permissions, readOnly, required, validate } = props;
    const Label = LabelFromProps || /*#__PURE__*/ React.createElement(LabelComp, {
        label: label,
        required: required
    });
    const minRows = 'minRows' in props ? props.minRows : 0;
    const maxRows = 'maxRows' in props ? props.maxRows : undefined;
    const blocks = 'blocks' in props ? props.blocks : undefined;
    const labelsFromProps = 'labels' in props ? props.labels : undefined;
    const { setDocFieldPreferences } = useDocumentInfo();
    const { dispatchFields, setModified } = useForm();
    const { code: locale } = useLocale();
    const { localization } = 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 || 'en';
            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 { path, rows = [], schemaPath, showError, valid, value } = useField({
        hasRows: true,
        path: pathFromProps || name,
        validate: memoizedValidate
    });
    const addRow = useCallback(async (rowIndex, blockType)=>{
        dispatchFields({
            type: 'ADD_ROW',
            blockType,
            path,
            rowIndex
        });
        setModified(true);
        setTimeout(()=>{
            scrollToID(`${path}-row-${rowIndex + 1}`);
        }, 0);
    }, [
        path,
        setModified,
        dispatchFields
    ]);
    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)=>{
        dispatchFields({
            type: 'REMOVE_ROW',
            path,
            rowIndex
        });
        setModified(true);
    }, [
        path,
        dispatchFields,
        setModified
    ]);
    const moveRow = useCallback((moveFromIndex, moveToIndex)=>{
        dispatchFields({
            type: 'MOVE_ROW',
            moveFromIndex,
            moveToIndex,
            path
        });
        setModified(true);
    }, [
        dispatchFields,
        path,
        setModified
    ]);
    const toggleCollapseAll = useCallback((collapsed)=>{
        dispatchFields({
            type: 'SET_ALL_ROWS_COLLAPSED',
            collapsed,
            path,
            setDocFieldPreferences
        });
    }, [
        dispatchFields,
        path,
        setDocFieldPreferences
    ]);
    const setCollapse = useCallback((rowID, collapsed)=>{
        dispatchFields({
            type: 'SET_ROW_COLLAPSED',
            collapsed,
            path,
            rowID,
            setDocFieldPreferences
        });
    }, [
        dispatchFields,
        path,
        setDocFieldPreferences
    ]);
    const hasMaxRows = maxRows && rows.length >= maxRows;
    const fieldErrorCount = rows.reduce((total, row)=>total + (row?.errorPaths?.size || 0), 0);
    const fieldHasErrors = submitted && fieldErrorCount + (valid ? 0 : 1) > 0;
    const showMinRows = rows.length < minRows || required && rows.length === 0;
    const showRequired = readOnly && rows.length === 0;
    return /*#__PURE__*/ React.createElement("div", {
        className: [
            fieldBaseClass,
            baseClass,
            className,
            fieldHasErrors ? `${baseClass}--has-error` : `${baseClass}--has-no-error`
        ].filter(Boolean).join(' '),
        id: `field-${path.replace(/\./g, '__')}`
    }, showError && /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__error-wrap`
    }, Error), /*#__PURE__*/ React.createElement("header", {
        className: `${baseClass}__header`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__header-wrap`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__heading-with-error`
    }, /*#__PURE__*/ React.createElement("h3", null, Label), fieldHasErrors && fieldErrorCount > 0 && /*#__PURE__*/ React.createElement(ErrorPill, {
        count: fieldErrorCount,
        i18n: i18n,
        withMessage: true
    })), rows.length > 0 && /*#__PURE__*/ React.createElement("ul", {
        className: `${baseClass}__header-actions`
    }, /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("button", {
        className: `${baseClass}__header-action`,
        onClick: ()=>toggleCollapseAll(true),
        type: "button"
    }, t('fields:collapseAll'))), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("button", {
        className: `${baseClass}__header-action`,
        onClick: ()=>toggleCollapseAll(false),
        type: "button"
    }, t('fields:showAll'))))), Description), /*#__PURE__*/ React.createElement(NullifyLocaleField, {
        fieldValue: value,
        localized: localized,
        path: path
    }), (rows.length > 0 || !valid && (showRequired || showMinRows)) && /*#__PURE__*/ React.createElement(DraggableSortable, {
        className: `${baseClass}__rows`,
        ids: rows.map((row)=>row.id),
        onDragEnd: ({ moveFromIndex, moveToIndex })=>moveRow(moveFromIndex, moveToIndex)
    }, rows.map((row, i)=>{
        const { blockType } = row;
        const blockToRender = blocks.find((block)=>block.slug === blockType);
        if (blockToRender) {
            return /*#__PURE__*/ React.createElement(DraggableSortableItem, {
                disabled: readOnly,
                id: row.id,
                key: row.id
            }, (draggableSortableItemProps)=>/*#__PURE__*/ React.createElement(BlockRow, {
                    ...draggableSortableItemProps,
                    addRow: addRow,
                    block: blockToRender,
                    blocks: blocks,
                    duplicateRow: duplicateRow,
                    forceRender: forceRender,
                    hasMaxRows: hasMaxRows,
                    indexPath: indexPath,
                    labels: labels,
                    moveRow: moveRow,
                    path: path,
                    permissions: permissions,
                    readOnly: readOnly,
                    removeRow: removeRow,
                    row: row,
                    rowCount: rows.length,
                    rowIndex: i,
                    schemaPath: schemaPath,
                    setCollapse: setCollapse
                }));
        }
        return null;
    }), !editingDefaultLocale && /*#__PURE__*/ React.createElement(React.Fragment, null, showMinRows && /*#__PURE__*/ React.createElement(Banner, {
        type: "error"
    }, t('validation:requiresAtLeast', {
        count: minRows,
        label: getTranslation(minRows === 1 || typeof minRows === 'undefined' ? labels.singular : labels.plural, i18n)
    })), showRequired && /*#__PURE__*/ React.createElement(Banner, null, t('validation:fieldHasNo', {
        label: getTranslation(labels.plural, i18n)
    })))), !readOnly && !hasMaxRows && /*#__PURE__*/ React.createElement(Fragment, null, /*#__PURE__*/ React.createElement(DrawerToggler, {
        className: `${baseClass}__drawer-toggler`,
        slug: drawerSlug
    }, /*#__PURE__*/ React.createElement(Button, {
        buttonStyle: "icon-label",
        el: "span",
        icon: "plus",
        iconPosition: "left",
        iconStyle: "with-border"
    }, t('fields:addLabel', {
        label: getTranslation(labels.singular, i18n)
    }))), /*#__PURE__*/ React.createElement(BlocksDrawer, {
        addRow: addRow,
        addRowIndex: rows?.length || 0,
        blocks: blocks,
        drawerSlug: drawerSlug,
        labels: labels
    })));
};
export default BlocksField;

//# sourceMappingURL=index.js.map