'use client';
import * as facelessUIImport from '@faceless-ui/modal';
import { getTranslation } from '@payloadcms/translations';
import { useRouter } from 'next/navigation.js';
import React, { useCallback, useState } from 'react';
import { FieldPathProvider } from '../../forms/FieldPathProvider/index.js';
import { useForm } from '../../forms/Form/context.js';
import Form from '../../forms/Form/index.js';
import RenderFields from '../../forms/RenderFields/index.js';
import FormSubmit from '../../forms/Submit/index.js';
import { X } from '../../icons/X/index.js';
import { useAuth } from '../../providers/Auth/index.js';
import { useComponentMap } from '../../providers/ComponentMapProvider/index.js';
import { useConfig } from '../../providers/Config/index.js';
import { DocumentInfoProvider } from '../../providers/DocumentInfo/index.js';
import { OperationContext } from '../../providers/OperationProvider/index.js';
import { useSearchParams } from '../../providers/SearchParams/index.js';
import { SelectAllStatus, useSelection } from '../../providers/SelectionProvider/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { getFormState } from '../../utilities/getFormState.js';
import { Drawer, DrawerToggler } from '../Drawer/index.js';
import { FieldSelect } from '../FieldSelect/index.js';
const baseClass = 'edit-many';
const Submit = ({ action, disabled })=>{
    const { submit } = useForm();
    const { t } = useTranslation();
    const save = useCallback(()=>{
        submit({
            action,
            method: 'PATCH',
            skipValidation: true
        });
    }, [
        action,
        submit
    ]);
    return /*#__PURE__*/ React.createElement(FormSubmit, {
        className: `${baseClass}__save`,
        disabled: disabled,
        onClick: save
    }, t('general:save'));
};
const Publish = ({ action, disabled })=>{
    const { submit } = useForm();
    const { t } = useTranslation();
    const save = useCallback(()=>{
        submit({
            action,
            method: 'PATCH',
            overrides: {
                _status: 'published'
            },
            skipValidation: true
        });
    }, [
        action,
        submit
    ]);
    return /*#__PURE__*/ React.createElement(FormSubmit, {
        className: `${baseClass}__publish`,
        disabled: disabled,
        onClick: save
    }, t('version:publishChanges'));
};
const SaveDraft = ({ action, disabled })=>{
    const { submit } = useForm();
    const { t } = useTranslation();
    const save = useCallback(()=>{
        submit({
            action,
            method: 'PATCH',
            overrides: {
                _status: 'draft'
            },
            skipValidation: true
        });
    }, [
        action,
        submit
    ]);
    return /*#__PURE__*/ React.createElement(FormSubmit, {
        className: `${baseClass}__draft`,
        disabled: disabled,
        onClick: save
    }, t('version:saveDraft'));
};
export const EditMany = (props)=>{
    const { Modal, useModal } = facelessUIImport;
    const { collection: { slug, fields, labels: { plural } } = {}, collection } = props;
    const { permissions } = useAuth();
    const { closeModal } = useModal();
    const { routes: { api: apiRoute }, serverURL } = useConfig();
    const { count, getQueryParams, selectAll } = useSelection();
    const { i18n, t } = useTranslation();
    const [selected, setSelected] = useState([]);
    const { stringifyParams } = useSearchParams();
    const router = useRouter();
    const { componentMap } = useComponentMap();
    const [reducedFieldMap, setReducedFieldMap] = useState([]);
    const [initialState, setInitialState] = useState();
    const hasInitializedState = React.useRef(false);
    const collectionPermissions = permissions?.collections?.[slug];
    const hasUpdatePermission = collectionPermissions?.update?.permission;
    const drawerSlug = `edit-${slug}`;
    React.useEffect(()=>{
        if (componentMap?.collections?.[slug]?.fieldMap) {
            const fieldMap = componentMap.collections[slug].fieldMap;
            const reducedFieldMap = [];
            fieldMap.map((field)=>{
                selected.map((selectedField)=>{
                    if (field.name === selectedField.name) {
                        reducedFieldMap.push(field);
                    }
                });
            });
            setReducedFieldMap(reducedFieldMap);
        }
    }, [
        componentMap.collections,
        fields,
        slug,
        selected
    ]);
    React.useEffect(()=>{
        if (!hasInitializedState.current) {
            const getInitialState = async ()=>{
                const result = await getFormState({
                    apiRoute,
                    body: {
                        collectionSlug: slug,
                        data: {},
                        operation: 'update',
                        schemaPath: slug
                    },
                    serverURL
                });
                setInitialState(result);
                hasInitializedState.current = true;
            };
            void getInitialState();
        }
    }, [
        apiRoute,
        hasInitializedState,
        serverURL,
        slug
    ]);
    if (selectAll === SelectAllStatus.None || !hasUpdatePermission) {
        return null;
    }
    const onSuccess = ()=>{
        router.replace(stringifyParams({
            params: {
                page: selectAll === SelectAllStatus.AllAvailable ? '1' : undefined
            }
        }));
    };
    return /*#__PURE__*/ React.createElement("div", {
        className: baseClass
    }, /*#__PURE__*/ React.createElement(DrawerToggler, {
        "aria-label": t('general:edit'),
        className: `${baseClass}__toggle`,
        onClick: ()=>{
            setSelected([]);
        },
        slug: drawerSlug
    }, t('general:edit')), /*#__PURE__*/ React.createElement(Drawer, {
        Header: null,
        slug: drawerSlug
    }, /*#__PURE__*/ React.createElement(DocumentInfoProvider, {
        collection: collection
    }, /*#__PURE__*/ React.createElement(OperationContext.Provider, {
        value: "update"
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__main`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__header`
    }, /*#__PURE__*/ React.createElement("h2", {
        className: `${baseClass}__header__title`
    }, t('general:editingLabel', {
        count,
        label: getTranslation(plural, i18n)
    })), /*#__PURE__*/ React.createElement("button", {
        "aria-label": t('general:close'),
        className: `${baseClass}__header__close`,
        id: `close-drawer__${drawerSlug}`,
        onClick: ()=>closeModal(drawerSlug),
        type: "button"
    }, /*#__PURE__*/ React.createElement(X, null))), /*#__PURE__*/ React.createElement(FieldPathProvider, {
        path: "",
        schemaPath: slug
    }, /*#__PURE__*/ React.createElement(Form, {
        className: `${baseClass}__form`,
        initialState: initialState,
        onSuccess: onSuccess
    }, /*#__PURE__*/ React.createElement(FieldSelect, {
        fields: fields,
        setSelected: setSelected
    }), reducedFieldMap.length === 0 ? null : /*#__PURE__*/ React.createElement(RenderFields, {
        fieldMap: reducedFieldMap
    }), /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__sidebar-wrap`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__sidebar`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__sidebar-sticky-wrap`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__document-actions`
    }, collection?.versions?.drafts ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Publish, {
        action: `${serverURL}${apiRoute}/${slug}${getQueryParams()}`,
        disabled: selected.length === 0
    }), /*#__PURE__*/ React.createElement(SaveDraft, {
        action: `${serverURL}${apiRoute}/${slug}${getQueryParams()}`,
        disabled: selected.length === 0
    })) : /*#__PURE__*/ React.createElement(Submit, {
        action: `${serverURL}${apiRoute}/${slug}${getQueryParams()}`,
        disabled: selected.length === 0
    }))))))))))));
};

//# sourceMappingURL=index.js.map