'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { Modal, useModal } from '@faceless-ui/modal';
import React, { useCallback } from 'react';
import { useTranslation } from '../../providers/Translation/index.js';
import { Button } from '../Button/index.js';
import { drawerZBase, useDrawerDepth } from '../Drawer/index.js';
import './index.scss';
const baseClass = 'confirmation-modal';
export function ConfirmationModal(props) {
    const { body, cancelLabel, className, confirmingLabel, confirmLabel, heading, modalSlug, onCancel: onCancelFromProps, onConfirm: onConfirmFromProps } = props;
    const editDepth = useDrawerDepth();
    const [confirming, setConfirming] = React.useState(false);
    const { closeModal, isModalOpen } = useModal();
    const { t } = useTranslation();
    const onConfirm = useCallback(async ()=>{
        if (!confirming) {
            setConfirming(true);
            if (typeof onConfirmFromProps === 'function') {
                await onConfirmFromProps();
            }
            setConfirming(false);
            closeModal(modalSlug);
        }
    }, [
        confirming,
        onConfirmFromProps,
        closeModal,
        modalSlug
    ]);
    const onCancel = useCallback(()=>{
        if (!confirming) {
            closeModal(modalSlug);
            if (typeof onCancelFromProps === 'function') {
                onCancelFromProps();
            }
        }
    }, [
        confirming,
        onCancelFromProps,
        closeModal,
        modalSlug
    ]);
    if (!isModalOpen(modalSlug)) {
        return null;
    }
    return /*#__PURE__*/ _jsxDEV(Modal, {
        className: [
            baseClass,
            className
        ].filter(Boolean).join(' '),
        // Fixes https://github.com/payloadcms/payload/issues/13778
        closeOnBlur: false,
        slug: modalSlug,
        style: {
            zIndex: drawerZBase + editDepth
        },
        children: /*#__PURE__*/ _jsxDEV("div", {
            className: `${baseClass}__wrapper`,
            children: [
                /*#__PURE__*/ _jsxDEV("div", {
                    className: `${baseClass}__content`,
                    children: [
                        typeof heading === 'string' ? /*#__PURE__*/ _jsxDEV("h1", {
                            children: heading
                        }, void 0, false, {
                            fileName: "src/elements/ConfirmationModal/index.tsx",
                            lineNumber: 85,
                            columnNumber: 42
                        }, this) : heading,
                        typeof body === 'string' ? /*#__PURE__*/ _jsxDEV("p", {
                            children: body
                        }, void 0, false, {
                            fileName: "src/elements/ConfirmationModal/index.tsx",
                            lineNumber: 86,
                            columnNumber: 39
                        }, this) : body
                    ]
                }, void 0, true, {
                    fileName: "src/elements/ConfirmationModal/index.tsx",
                    lineNumber: 84,
                    columnNumber: 9
                }, this),
                /*#__PURE__*/ _jsxDEV("div", {
                    className: `${baseClass}__controls`,
                    children: [
                        /*#__PURE__*/ _jsxDEV(Button, {
                            buttonStyle: "secondary",
                            disabled: confirming,
                            id: "confirm-cancel",
                            onClick: onCancel,
                            size: "large",
                            type: "button",
                            children: cancelLabel || t('general:cancel')
                        }, void 0, false, {
                            fileName: "src/elements/ConfirmationModal/index.tsx",
                            lineNumber: 89,
                            columnNumber: 11
                        }, this),
                        /*#__PURE__*/ _jsxDEV(Button, {
                            id: "confirm-action",
                            onClick: onConfirm,
                            size: "large",
                            children: confirming ? confirmingLabel || `${t('general:loading')}...` : confirmLabel || t('general:confirm')
                        }, void 0, false, {
                            fileName: "src/elements/ConfirmationModal/index.tsx",
                            lineNumber: 99,
                            columnNumber: 11
                        }, this)
                    ]
                }, void 0, true, {
                    fileName: "src/elements/ConfirmationModal/index.tsx",
                    lineNumber: 88,
                    columnNumber: 9
                }, this)
            ]
        }, void 0, true, {
            fileName: "src/elements/ConfirmationModal/index.tsx",
            lineNumber: 83,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/ConfirmationModal/index.tsx",
        lineNumber: 74,
        columnNumber: 5
    }, this);
}

//# sourceMappingURL=index.js.map