'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { useModal } from '@faceless-ui/modal';
import { getTranslation } from '@payloadcms/translations';
import { unflatten } from 'payload/shared';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Button } from '../../../elements/Button/index.js';
import { Form } from '../../../forms/Form/index.js';
import { FieldPathContext } from '../../../forms/RenderFields/context.js';
import { RenderField } from '../../../forms/RenderFields/RenderField.js';
import { XIcon } from '../../../icons/X/index.js';
import { useAuth } from '../../../providers/Auth/index.js';
import { useServerFunctions } from '../../../providers/ServerFunctions/index.js';
import { useTranslation } from '../../../providers/Translation/index.js';
import { abortAndIgnore, handleAbortRef } from '../../../utilities/abortAndIgnore.js';
import { FieldSelect } from '../../FieldSelect/index.js';
import { useFormsManager } from '../FormsManager/index.js';
import { baseClass } from './index.js';
import './index.scss';
import '../../../forms/RenderFields/index.scss';
export const EditManyBulkUploadsDrawerContent = (props)=>{
    const { collection: { fields, labels: { plural, singular } } = {}, collection, drawerSlug, forms } = props;
    const [isInitializing, setIsInitializing] = useState(false);
    const { permissions } = useAuth();
    const { i18n, t } = useTranslation();
    const { closeModal } = useModal();
    const { bulkUpdateForm } = useFormsManager();
    const { getFormState } = useServerFunctions();
    const abortFormStateRef = React.useRef(null);
    const [selectedFields, setSelectedFields] = useState([]);
    const collectionPermissions = permissions?.collections?.[collection.slug];
    const select = useMemo(()=>{
        return unflatten(selectedFields.reduce((acc, option)=>{
            acc[option.value.path] = true;
            return acc;
        }, {}));
    }, [
        selectedFields
    ]);
    const onChange = useCallback(async ({ formState: prevFormState, submitted })=>{
        const controller = handleAbortRef(abortFormStateRef);
        const { state } = await getFormState({
            collectionSlug: collection.slug,
            docPermissions: collectionPermissions,
            docPreferences: null,
            formState: prevFormState,
            operation: 'update',
            schemaPath: collection.slug,
            select,
            signal: controller.signal,
            skipValidation: !submitted
        });
        abortFormStateRef.current = null;
        return state;
    }, [
        getFormState,
        collection,
        collectionPermissions,
        select
    ]);
    useEffect(()=>{
        const abortFormState = abortFormStateRef.current;
        return ()=>{
            abortAndIgnore(abortFormState);
        };
    }, []);
    const handleSubmit = useCallback((formState)=>{
        const pairedData = selectedFields.reduce((acc, option)=>{
            if (formState[option.value.path]) {
                acc[option.value.path] = formState[option.value.path].value;
            }
            return acc;
        }, {});
        void bulkUpdateForm(pairedData, ()=>closeModal(drawerSlug));
    }, [
        closeModal,
        drawerSlug,
        bulkUpdateForm,
        selectedFields
    ]);
    const onFieldSelect = useCallback(async ({ dispatchFields, formState, selected })=>{
        setIsInitializing(true);
        setSelectedFields(selected || []);
        const { state } = await getFormState({
            collectionSlug: collection.slug,
            docPermissions: collectionPermissions,
            docPreferences: null,
            formState,
            operation: 'update',
            schemaPath: collection.slug,
            select: unflatten(selected.reduce((acc, option)=>{
                acc[option.value.path] = true;
                return acc;
            }, {})),
            skipValidation: true
        });
        dispatchFields({
            type: 'UPDATE_MANY',
            formState: state
        });
        setIsInitializing(false);
    }, [
        getFormState,
        collection,
        collectionPermissions
    ]);
    return /*#__PURE__*/ _jsxDEV("div", {
        className: `${baseClass}__main`,
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__header`,
                children: [
                    /*#__PURE__*/ _jsxDEV("h2", {
                        className: `${baseClass}__header__title`,
                        children: t('general:editingLabel', {
                            count: forms.length,
                            label: getTranslation(forms.length > 1 ? plural : singular, i18n)
                        })
                    }, void 0, false, {
                        fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                        lineNumber: 145,
                        columnNumber: 9
                    }, this),
                    /*#__PURE__*/ _jsxDEV("button", {
                        "aria-label": t('general:close'),
                        className: `${baseClass}__header__close`,
                        id: `close-drawer__${drawerSlug}`,
                        onClick: ()=>closeModal(drawerSlug),
                        type: "button",
                        children: /*#__PURE__*/ _jsxDEV(XIcon, {}, void 0, false, {
                            fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                            lineNumber: 158,
                            columnNumber: 11
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                        lineNumber: 151,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                lineNumber: 144,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV(Form, {
                className: `${baseClass}__form`,
                isInitializing: isInitializing,
                onChange: [
                    onChange
                ],
                onSubmit: handleSubmit,
                children: [
                    /*#__PURE__*/ _jsxDEV(FieldSelect, {
                        fields: fields,
                        onChange: onFieldSelect,
                        permissions: collectionPermissions.fields
                    }, void 0, false, {
                        fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                        lineNumber: 167,
                        columnNumber: 9
                    }, this),
                    selectedFields.length === 0 ? null : /*#__PURE__*/ _jsxDEV("div", {
                        className: "render-fields",
                        children: /*#__PURE__*/ _jsxDEV(FieldPathContext, {
                            value: undefined,
                            children: selectedFields.map((option, i)=>{
                                const { value: { field, fieldPermissions, path } } = option;
                                return /*#__PURE__*/ _jsxDEV(RenderField, {
                                    clientFieldConfig: field,
                                    indexPath: "",
                                    parentPath: "",
                                    parentSchemaPath: "",
                                    path: path,
                                    permissions: fieldPermissions
                                }, `${path}-${i}`, false, {
                                    fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                                    lineNumber: 181,
                                    columnNumber: 19
                                }, this);
                            })
                        }, void 0, false, {
                            fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                            lineNumber: 174,
                            columnNumber: 13
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                        lineNumber: 173,
                        columnNumber: 11
                    }, this),
                    /*#__PURE__*/ _jsxDEV("div", {
                        className: `${baseClass}__sidebar-wrap`,
                        children: /*#__PURE__*/ _jsxDEV("div", {
                            className: `${baseClass}__sidebar`,
                            children: /*#__PURE__*/ _jsxDEV("div", {
                                className: `${baseClass}__sidebar-sticky-wrap`,
                                children: /*#__PURE__*/ _jsxDEV("div", {
                                    className: `${baseClass}__document-actions`,
                                    children: /*#__PURE__*/ _jsxDEV(Button, {
                                        type: "submit",
                                        children: t('general:applyChanges')
                                    }, void 0, false, {
                                        fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                                        lineNumber: 199,
                                        columnNumber: 17
                                    }, this)
                                }, void 0, false, {
                                    fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                                    lineNumber: 198,
                                    columnNumber: 15
                                }, this)
                            }, void 0, false, {
                                fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                                lineNumber: 197,
                                columnNumber: 13
                            }, this)
                        }, void 0, false, {
                            fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                            lineNumber: 196,
                            columnNumber: 11
                        }, this)
                    }, void 0, false, {
                        fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                        lineNumber: 195,
                        columnNumber: 9
                    }, this)
                ]
            }, void 0, true, {
                fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
                lineNumber: 161,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/BulkUpload/EditMany/DrawerContent.tsx",
        lineNumber: 143,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=DrawerContent.js.map