"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConfirmModal = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
* Modal / Dialog Component
*
* For displaying pop - up windows, confirmations, forms, or additional details without navigating away
*/
const react_1 = require("react");
const Modal = (0, react_1.memo)(({ isOpen, onClose, title, children, footer, size = 'medium', closeOnEsc = true, closeOnBackdrop = true, showCloseButton = true, className = '', backdropClassName = '', contentClassName = '', ariaLabel = 'Modal dialog', zIndex = 1050, }) => {
    const modalRef = (0, react_1.useRef)(null);
    const handleEscKey = (0, react_1.useCallback)((event) => {
        if (isOpen && closeOnEsc && event.key === 'Escape') {
            onClose();
        }
    }, [isOpen, closeOnEsc, onClose]);
    const handleBackdropClick = (0, react_1.useCallback)((event) => {
        if (closeOnBackdrop && event.target === event.currentTarget) {
            onClose();
        }
    }, [closeOnBackdrop, onClose]);
    (0, react_1.useEffect)(() => {
        if (isOpen) {
            document.addEventListener('keydown', handleEscKey);
            if (modalRef.current) {
                modalRef.current.focus();
            }
            document.body.style.overflow = 'hidden';
        }
        return () => {
            document.removeEventListener('keydown', handleEscKey);
            document.body.style.overflow = '';
        };
    }, [isOpen, handleEscKey]);
    if (!isOpen)
        return null;
    return ((0, jsx_runtime_1.jsx)("div", { className: `bf-modal-backdrop ${backdropClassName}`, onClick: handleBackdropClick, "aria-hidden": "true", style: { zIndex }, children: (0, jsx_runtime_1.jsx)("div", { className: `bf-modal bf-modal-${size} ${className}`, ref: modalRef, role: "dialog", "aria-modal": "true", "aria-label": ariaLabel, tabIndex: -1, children: (0, jsx_runtime_1.jsxs)("div", { className: `bf-modal-content ${contentClassName}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "bf-modal-header", children: [title && (0, jsx_runtime_1.jsx)("h2", { className: "bf-modal-title", children: title }), showCloseButton && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "bf-modal-close", onClick: onClose, "aria-label": "Close modal", children: "\u00D7" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "bf-modal-body", children: children }), footer && (0, jsx_runtime_1.jsx)("div", { className: "bf-modal-footer", children: footer })] }) }) }));
});
Modal.displayName = 'Modal';
exports.ConfirmModal = (0, react_1.memo)(({ isOpen, onClose, onConfirm, title = 'Confirm Action', message = 'Are you sure you want to proceed?', confirmText = 'Confirm', cancelText = 'Cancel', variant = 'primary', confirmButtonProps = {}, cancelButtonProps = {}, ...modalProps }) => {
    const handleConfirm = (0, react_1.useCallback)(() => {
        onConfirm();
        onClose();
    }, [onConfirm, onClose]);
    return ((0, jsx_runtime_1.jsx)(Modal, { isOpen: isOpen, onClose: onClose, title: title, footer: (0, jsx_runtime_1.jsxs)("div", { className: "bf-modal-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "bf-btn bf-btn-secondary", onClick: onClose, ...cancelButtonProps, children: cancelText }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: `bf-btn bf-btn-${variant}`, onClick: handleConfirm, ...confirmButtonProps, children: confirmText })] }), ...modalProps, children: (0, jsx_runtime_1.jsx)("p", { className: "bf-confirm-message", children: message }) }));
});
exports.ConfirmModal.displayName = 'ConfirmModal';
exports.default = Modal;
//# sourceMappingURL=Modal.js.map