"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccessibleModal = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const AccessibilitySystem_js_1 = require("../accessibility/AccessibilitySystem.js");
const AccessibleModal = ({ isOpen, onClose, title, children, description, showCloseButton = true, className = '', overlayClassName = '', }) => {
    const modalRef = (0, react_1.useRef)(null);
    const { analyzeComponent, results } = (0, AccessibilitySystem_js_1.useAccessibility)();
    // Focus trap
    (0, react_1.useEffect)(() => {
        if (isOpen && modalRef.current) {
            const focusable = modalRef.current.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
            if (focusable.length)
                focusable[0].focus();
            const handleKeyDown = (e) => {
                if (e.key === 'Tab') {
                    const first = focusable[0];
                    const last = focusable[focusable.length - 1];
                    if (e.shiftKey && document.activeElement === first) {
                        e.preventDefault();
                        last.focus();
                    }
                    else if (!e.shiftKey && document.activeElement === last) {
                        e.preventDefault();
                        first.focus();
                    }
                }
                else if (e.key === 'Escape') {
                    onClose();
                }
            };
            modalRef.current.addEventListener('keydown', handleKeyDown);
            return () => modalRef.current?.removeEventListener('keydown', handleKeyDown);
        }
    }, [isOpen, onClose]);
    // Accessibility analysis
    (0, react_1.useEffect)(() => {
        if (isOpen && modalRef.current) {
            try {
                analyzeComponent(modalRef.current);
            }
            catch (error) {
                console.error('Error analyzing modal for accessibility:', error);
            }
        }
    }, [isOpen, analyzeComponent]);
    if (!isOpen)
        return null;
    return ((0, jsx_runtime_1.jsx)("div", { className: `fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 ${overlayClassName}`, "aria-modal": "true", role: "dialog", "aria-labelledby": "modal-title", "aria-describedby": description ? 'modal-desc' : undefined, tabIndex: -1, onClick: e => {
            if (e.target === e.currentTarget)
                onClose();
        }, children: (0, jsx_runtime_1.jsxs)("div", { ref: modalRef, className: `bg-white dark:bg-gray-900 rounded-lg shadow-lg max-w-lg w-full p-6 relative outline-none ${className}`, tabIndex: 0, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, jsx_runtime_1.jsx)("h2", { id: "modal-title", className: "text-xl font-bold", children: title }), showCloseButton && ((0, jsx_runtime_1.jsx)("button", { "aria-label": "Close modal", onClick: onClose, className: "ml-2 p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring", children: (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u00D7" }) }))] }), description && ((0, jsx_runtime_1.jsx)("div", { id: "modal-desc", className: "mb-4 text-gray-600 dark:text-gray-300 text-sm", children: description })), (0, jsx_runtime_1.jsx)("div", { children: children }), results && results.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-4 p-2 bg-yellow-50 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-100 rounded text-sm", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Accessibility issues:" }), (0, jsx_runtime_1.jsx)("ul", { className: "list-disc ml-5", children: results.map((r, i) => ((0, jsx_runtime_1.jsx)("li", { children: r.message }, i))) })] }))] }) }));
};
exports.AccessibleModal = AccessibleModal;
exports.default = AccessibleModal;
//# sourceMappingURL=AccessibleModal.js.map