'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 { toast } from 'react-toastify';
import { useAuth } from '../../providers/Auth/index.js';
import { useConfig } from '../../providers/Config/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 { MinimalTemplate } from '../../templates/Minimal/index.js';
import { requests } from '../../utilities/api.js';
import { Button } from '../Button/index.js';
import Pill from '../Pill/index.js';
const baseClass = 'delete-documents';
export const DeleteMany = (props)=>{
    const { Modal, useModal } = facelessUIImport;
    const { collection: { slug, labels: { plural } } = {} } = props;
    const { permissions } = useAuth();
    const { routes: { api }, serverURL } = useConfig();
    const { toggleModal } = useModal();
    const { count, getQueryParams, selectAll, toggleAll } = useSelection();
    const { i18n, t } = useTranslation();
    const [deleting, setDeleting] = useState(false);
    const router = useRouter();
    const { stringifyParams } = useSearchParams();
    const collectionPermissions = permissions?.collections?.[slug];
    const hasDeletePermission = collectionPermissions?.delete?.permission;
    const modalSlug = `delete-${slug}`;
    const addDefaultError = useCallback(()=>{
        toast.error(t('error:unknown'));
    }, [
        t
    ]);
    const handleDelete = useCallback(async ()=>{
        setDeleting(true);
        await requests.delete(`${serverURL}${api}/${slug}${getQueryParams()}`, {
            headers: {
                'Accept-Language': i18n.language,
                'Content-Type': 'application/json'
            }
        }).then(async (res)=>{
            try {
                const json = await res.json();
                toggleModal(modalSlug);
                if (res.status < 400) {
                    toast.success(json.message || t('general:deletedSuccessfully'), {
                        autoClose: 3000
                    });
                    toggleAll();
                    router.replace(stringifyParams({
                        params: {
                            page: selectAll ? '1' : undefined
                        },
                        replace: true
                    }));
                    return null;
                }
                if (json.errors) {
                    toast.error(json.message);
                } else {
                    addDefaultError();
                }
                return false;
            } catch (e) {
                return addDefaultError();
            }
        });
    }, [
        addDefaultError,
        api,
        getQueryParams,
        i18n.language,
        modalSlug,
        router,
        selectAll,
        serverURL,
        slug,
        stringifyParams,
        t,
        toggleAll,
        toggleModal
    ]);
    if (selectAll === SelectAllStatus.None || !hasDeletePermission) {
        return null;
    }
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Pill, {
        className: `${baseClass}__toggle`,
        onClick: ()=>{
            setDeleting(false);
            toggleModal(modalSlug);
        }
    }, t('general:delete')), /*#__PURE__*/ React.createElement(Modal, {
        className: baseClass,
        slug: modalSlug
    }, /*#__PURE__*/ React.createElement(MinimalTemplate, {
        className: `${baseClass}__template`
    }, /*#__PURE__*/ React.createElement("h1", null, t('general:confirmDeletion')), /*#__PURE__*/ React.createElement("p", null, t('general:aboutToDeleteCount', {
        count,
        label: getTranslation(plural, i18n)
    })), /*#__PURE__*/ React.createElement(Button, {
        buttonStyle: "secondary",
        id: "confirm-cancel",
        onClick: deleting ? undefined : ()=>toggleModal(modalSlug),
        type: "button"
    }, t('general:cancel')), /*#__PURE__*/ React.createElement(Button, {
        id: "confirm-delete",
        onClick: deleting ? undefined : handleDelete
    }, deleting ? t('general:deleting') : t('general:confirm')))));
};
export default DeleteMany;

//# sourceMappingURL=index.js.map