"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModalExample = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const AccessibleButton_js_1 = __importDefault(require("../components/modern/AccessibleButton.js"));
const AccessibleModal_js_1 = __importDefault(require("../components/modern/AccessibleModal.js"));
const AccessibleInput_js_1 = __importDefault(require("../components/modern/AccessibleInput.js"));
const ModalExample = () => {
    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
    const [email, setEmail] = (0, react_1.useState)('');
    const [submitted, setSubmitted] = (0, react_1.useState)(false);
    const handleOpenModal = () => {
        setIsModalOpen(true);
    };
    const handleCloseModal = () => {
        setIsModalOpen(false);
    };
    const handleSubmit = () => {
        setSubmitted(true);
        setTimeout(() => {
            setIsModalOpen(false);
            // Reset for next demo
            setTimeout(() => {
                setSubmitted(false);
                setEmail('');
            }, 500);
        }, 1500);
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: "modal-example p-6 max-w-4xl mx-auto", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-2xl font-bold mb-4", children: "AccessibleModal Example" }), (0, jsx_runtime_1.jsx)("p", { className: "mb-4", children: "This example demonstrates the use of the AccessibleModal component with proper ARIA attributes and keyboard navigation." }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col space-y-4", children: [(0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { onClick: handleOpenModal, variant: "primary", children: "Open Modal" }), (0, jsx_runtime_1.jsx)(AccessibleModal_js_1.default, { isOpen: isModalOpen, onClose: handleCloseModal, title: "Newsletter Signup", description: "Subscribe to our newsletter to receive updates and news.", className: "max-w-md", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: !submitted ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(AccessibleInput_js_1.default, { label: "Email Address", type: "email", placeholder: "your.email@example.com", value: email, onChange: (e) => setEmail(e.target.value), required: true, helperText: "We'll never share your email with anyone else." }), (0, jsx_runtime_1.jsxs)("div", { className: "flex space-x-2 justify-end", children: [(0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { onClick: handleCloseModal, variant: "secondary", children: "Cancel" }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { onClick: handleSubmit, variant: "primary", disabled: !email, children: "Subscribe" })] })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-green-600 text-xl mb-2", children: "\u2713" }), (0, jsx_runtime_1.jsx)("p", { className: "text-lg font-medium", children: "Thank you for subscribing!" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600", children: "You'll receive our next newsletter soon." })] })) }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 border-t pt-4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-bold mb-2", children: "Accessibility Features" }), (0, jsx_runtime_1.jsxs)("ul", { className: "list-disc list-inside space-y-1", children: [(0, jsx_runtime_1.jsx)("li", { children: "Focus trap within the modal when open" }), (0, jsx_runtime_1.jsx)("li", { children: "ESC key closes the modal" }), (0, jsx_runtime_1.jsx)("li", { children: "ARIA attributes for screen reader compatibility" }), (0, jsx_runtime_1.jsx)("li", { children: "Click outside to close the modal" }), (0, jsx_runtime_1.jsx)("li", { children: "Focus returns to the trigger button when closed" }), (0, jsx_runtime_1.jsx)("li", { children: "Modal announces itself to screen readers" })] })] })] }));
};
exports.ModalExample = ModalExample;
exports.default = exports.ModalExample;
//# sourceMappingURL=ModalExample.js.map