"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccessibilitySystemDemoWithProvider = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
// We're creating a simplified version that doesn't use all the components
// This avoids build issues while still showing how to use the system
const AccessibleButton_js_1 = __importDefault(require("../components/modern/AccessibleButton.js"));
const AccessibleInput_js_1 = __importDefault(require("../components/modern/AccessibleInput.js"));
const AccessibleSelect_js_1 = __importDefault(require("../components/modern/AccessibleSelect.js"));
const AccessibleCheckbox_js_1 = __importDefault(require("../components/modern/AccessibleCheckbox.js"));
const AccessibleRadio_js_1 = __importDefault(require("../components/modern/AccessibleRadio.js"));
const AccessibleTabs_js_1 = __importDefault(require("../components/modern/AccessibleTabs.js"));
const AccessibleModal_js_1 = __importDefault(require("../components/modern/AccessibleModal.js"));
const AccessibilitySystem_js_1 = require("../components/accessibility/AccessibilitySystem.js");
// Define constants that would normally come from the accessibility system
const AccessibilityLevels = {
    A: 'A',
    AA: 'AA',
    AAA: 'AAA',
};
const SeverityLevels = {
    ERROR: 'error',
    WARNING: 'warning',
    INFO: 'info',
};
// Create simplified versions of components for demo purposes
const AccessibilityProvider = ({ children }) => ((0, jsx_runtime_1.jsx)("div", { className: "accessibility-provider", children: children }));
const AccessibilityChecker = () => ((0, jsx_runtime_1.jsx)("div", { className: "accessibility-checker", children: "Accessibility Checker Component" }));
const AccessibilityPreview = ({ component, mode = 'normal' }) => ((0, jsx_runtime_1.jsx)("div", { className: "accessibility-preview", "data-mode": mode, children: component }));
const AccessibilityScore = () => ((0, jsx_runtime_1.jsxs)("div", { className: "accessibility-score", children: [(0, jsx_runtime_1.jsx)("div", { className: "score-circle", children: "95%" }), (0, jsx_runtime_1.jsx)("p", { children: "Accessibility Score" })] }));
// Example component with accessibility issues for demonstration
const ComponentWithIssues = () => {
    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { children: "Component with Issues" }), (0, jsx_runtime_1.jsx)("img", { src: "chart.png" }), (0, jsx_runtime_1.jsx)("button", { style: { backgroundColor: '#999', color: '#777' }, children: "Low Contrast" }), (0, jsx_runtime_1.jsx)("div", { tabIndex: 0, role: "button", children: "Incorrect ARIA" })] }));
};
// Example component demonstrating best practices
const AccessibleComponent = () => {
    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { children: "Accessible Component" }), (0, jsx_runtime_1.jsx)("img", { src: "chart.png", alt: "Chart showing quarterly sales data" }), (0, jsx_runtime_1.jsx)("button", { style: { backgroundColor: '#2563EB', color: 'white' }, children: "Good Contrast" }), (0, jsx_runtime_1.jsx)("button", { "aria-label": "Settings", children: (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u2699\uFE0F" }) })] }));
};
const AccessibilitySystemDemo = () => {
    // State for interactive demo
    const [conformanceLevel, setConformanceLevel] = (0, react_1.useState)(AccessibilityLevels.AA);
    const [severityLevel, setSeverityLevel] = (0, react_1.useState)(SeverityLevels.WARNING);
    const [previewMode, setPreviewMode] = (0, react_1.useState)('normal');
    const [showAccessibilityTools, setShowAccessibilityTools] = (0, react_1.useState)(true);
    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
    const [selectedTab, setSelectedTab] = (0, react_1.useState)('analysis');
    const [email, setEmail] = (0, react_1.useState)('');
    const [emailError, setEmailError] = (0, react_1.useState)(undefined);
    // Refs for component analysis
    const badComponentRef = (0, react_1.useRef)(null);
    const goodComponentRef = (0, react_1.useRef)(null);
    // Access the accessibility system
    const { analyzeComponent, results, isAnalyzing, clearResults } = (0, AccessibilitySystem_js_1.useAccessibility)();
    // Radio options for the demo
    const radioOptions = [
        { label: 'Option 1', value: 'option1', description: 'First option description' },
        { label: 'Option 2', value: 'option2', description: 'Second option description' },
        { label: 'Option 3', value: 'option3', description: 'Third option description', isDisabled: true },
    ];
    // Select options for the demo
    const countryOptions = [
        { label: 'United States', value: 'us' },
        { label: 'Canada', value: 'ca' },
        { label: 'United Kingdom', value: 'uk' },
        { label: 'Australia', value: 'au' },
        { label: 'Japan', value: 'jp' },
        { label: 'Germany', value: 'de' },
        { label: 'France', value: 'fr' },
        { label: 'Italy', value: 'it' },
    ];
    // Tab items for the demo
    const tabItems = [
        {
            id: 'analysis',
            label: 'Analysis',
            description: 'Analyze components for accessibility issues',
            content: ((0, jsx_runtime_1.jsxs)("div", { className: "tab-content", children: [(0, jsx_runtime_1.jsx)("h3", { children: "Component Analysis" }), (0, jsx_runtime_1.jsx)("p", { children: "Use the accessibility system to analyze components for issues." }), (0, jsx_runtime_1.jsxs)("div", { className: "component-section mt-6", children: [(0, jsx_runtime_1.jsx)("h4", { className: "mb-3", children: "Component with Issues" }), (0, jsx_runtime_1.jsx)("div", { ref: badComponentRef, children: (0, jsx_runtime_1.jsx)(ComponentWithIssues, {}) }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { className: "mt-3", onClick: () => analyzeComponent(badComponentRef.current), children: "Analyze Component" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "component-section mt-6", children: [(0, jsx_runtime_1.jsx)("h4", { className: "mb-3", children: "Accessible Component" }), (0, jsx_runtime_1.jsx)("div", { ref: goodComponentRef, children: (0, jsx_runtime_1.jsx)(AccessibleComponent, {}) }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { className: "mt-3", onClick: () => analyzeComponent(goodComponentRef.current), children: "Analyze Component" })] }), results.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "results-section mt-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsx)("h4", { children: "Analysis Results" }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: "secondary", size: "sm", onClick: clearResults, children: "Clear Results" })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: (0, jsx_runtime_1.jsx)(AccessibilityScore, { results: results }) }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6", children: [(0, jsx_runtime_1.jsx)("h5", { children: "Issues Found:" }), (0, jsx_runtime_1.jsx)("ul", { className: "list-disc pl-5 mt-2", children: results.map((issue, index) => ((0, jsx_runtime_1.jsxs)("li", { className: `text-${issue.severity === 'error' ? 'red' : issue.severity === 'warning' ? 'yellow' : 'blue'}-600`, children: [(0, jsx_runtime_1.jsxs)("strong", { children: [issue.criterion, ":"] }), " ", issue.message, issue.details && (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: issue.details }), issue.fix && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-100 p-2 mt-1 rounded text-sm", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Suggested Fix:" }), " ", issue.fix] }))] }, index))) })] })] }))] }))
        },
        {
            id: 'preview',
            label: 'Preview',
            description: 'Preview how components appear to different users',
            content: ((0, jsx_runtime_1.jsxs)("div", { className: "tab-content", children: [(0, jsx_runtime_1.jsx)("h3", { children: "Accessibility Preview" }), (0, jsx_runtime_1.jsx)("p", { children: "Preview how components might appear to users with different needs." }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4", children: (0, jsx_runtime_1.jsx)(AccessibleRadio_js_1.default, { label: "Preview Mode", name: "previewMode", isHorizontal: true, value: previewMode, onChange: (value) => setPreviewMode(value), options: [
                                { label: 'Normal', value: 'normal' },
                                { label: 'Colorblind', value: 'colorblind' },
                                { label: 'High Contrast', value: 'high-contrast' },
                                { label: 'Screen Reader', value: 'screen-reader' },
                            ] }) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6", children: (0, jsx_runtime_1.jsx)(AccessibilityPreview, { component: (0, jsx_runtime_1.jsxs)("div", { className: "demo-components grid grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded", children: [(0, jsx_runtime_1.jsx)("h4", { className: "mb-2", children: "Component with Issues" }), (0, jsx_runtime_1.jsx)(ComponentWithIssues, {})] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 border rounded", children: [(0, jsx_runtime_1.jsx)("h4", { className: "mb-2", children: "Accessible Component" }), (0, jsx_runtime_1.jsx)(AccessibleComponent, {})] })] }), mode: previewMode }) })] }))
        },
        {
            id: 'components',
            label: 'Components',
            description: 'Explore accessible components',
            content: ((0, jsx_runtime_1.jsxs)("div", { className: "tab-content", children: [(0, jsx_runtime_1.jsx)("h3", { children: "Accessible Components" }), (0, jsx_runtime_1.jsx)("p", { children: "Explore the accessible components in the BFUI library." }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-6 mt-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "component-demo p-4 border rounded", children: [(0, jsx_runtime_1.jsx)("h4", { className: "mb-3", children: "AccessibleButton" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [(0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: "primary", children: "Primary" }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: "secondary", children: "Secondary" }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: "danger", children: "Danger" }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: "success", children: "Success" }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: "warning", children: "Warning" }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { isLoading: true, children: "Loading" }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { disabled: true, children: "Disabled" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "component-demo p-4 border rounded", children: [(0, jsx_runtime_1.jsx)("h4", { className: "mb-3", children: "AccessibleInput" }), (0, jsx_runtime_1.jsx)(AccessibleInput_js_1.default, { label: "Email Address", type: "email", value: email, onChange: (e) => {
                                            setEmail(e.target.value);
                                            if (!e.target.value.includes('@')) {
                                                setEmailError('Please enter a valid email address');
                                            }
                                            else {
                                                setEmailError(undefined);
                                            }
                                        }, error: emailError, helperText: "We'll never share your email with anyone else.", required: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "component-demo p-4 border rounded", children: [(0, jsx_runtime_1.jsx)("h4", { className: "mb-3", children: "AccessibleSelect" }), (0, jsx_runtime_1.jsx)(AccessibleSelect_js_1.default, { label: "Country", options: countryOptions, searchable: true, helperText: "Select your country of residence" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "component-demo p-4 border rounded", children: [(0, jsx_runtime_1.jsx)("h4", { className: "mb-3", children: "AccessibleCheckbox" }), (0, jsx_runtime_1.jsx)(AccessibleCheckbox_js_1.default, { label: "I agree to the terms and conditions", helperText: "You must agree to continue", required: true }), (0, jsx_runtime_1.jsx)(AccessibleCheckbox_js_1.default, { label: "Subscribe to newsletter", className: "mt-2" }), (0, jsx_runtime_1.jsx)(AccessibleCheckbox_js_1.default, { label: "Admin access", disabled: true, className: "mt-2" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "component-demo p-4 border rounded", children: [(0, jsx_runtime_1.jsx)("h4", { className: "mb-3", children: "AccessibleRadio" }), (0, jsx_runtime_1.jsx)(AccessibleRadio_js_1.default, { label: "Select an option", name: "demoRadio", options: radioOptions })] }), (0, jsx_runtime_1.jsxs)("div", { className: "component-demo p-4 border rounded", children: [(0, jsx_runtime_1.jsx)("h4", { className: "mb-3", children: "AccessibleModal" }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { onClick: () => setIsModalOpen(true), children: "Open Modal" })] })] })] }))
        },
        {
            id: 'settings',
            label: 'Settings',
            description: 'Configure accessibility settings',
            content: ((0, jsx_runtime_1.jsxs)("div", { className: "tab-content", children: [(0, jsx_runtime_1.jsx)("h3", { children: "Accessibility Settings" }), (0, jsx_runtime_1.jsx)("p", { children: "Configure the accessibility system settings." }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6", children: (0, jsx_runtime_1.jsx)(AccessibleSelect_js_1.default, { label: "WCAG Conformance Level", options: [
                                { value: 'A', label: 'Level A (Minimum)' },
                                { value: 'AA', label: 'Level AA (Standard)' },
                                { value: 'AAA', label: 'Level AAA (Enhanced)' },
                            ], value: conformanceLevel, onChange: (value) => setConformanceLevel(value), helperText: "The WCAG conformance level to check against" }) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6", children: (0, jsx_runtime_1.jsx)(AccessibleSelect_js_1.default, { label: "Minimum Severity Level", options: [
                                { value: 'error', label: 'Error (Critical issues only)' },
                                { value: 'warning', label: 'Warning (Include warnings)' },
                                { value: 'info', label: 'Info (Include all suggestions)' },
                            ], value: severityLevel, onChange: (value) => setSeverityLevel(value), helperText: "The minimum severity level to report" }) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6", children: (0, jsx_runtime_1.jsx)(AccessibleCheckbox_js_1.default, { label: "Show Accessibility Tools", checked: showAccessibilityTools, onChange: (e) => setShowAccessibilityTools(e.target.checked), helperText: "Show or hide accessibility tools in the UI" }) })] }))
        },
    ];
    // Handle tab change
    const handleTabChange = (tabId) => {
        setSelectedTab(tabId);
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: "accessibility-system-demo max-w-6xl mx-auto p-6", children: [(0, jsx_runtime_1.jsxs)("header", { className: "mb-8 text-center", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-3xl font-bold mb-2", children: "Accessibility System Demo" }), (0, jsx_runtime_1.jsx)("p", { className: "text-lg text-gray-600", children: "Explore the BFUI Accessibility System and Accessible Components" })] }), (0, jsx_runtime_1.jsx)("main", { children: (0, jsx_runtime_1.jsx)(AccessibleTabs_js_1.default, { items: tabItems, selectedTabId: selectedTab, onTabChange: handleTabChange, showDescriptions: true, isPill: true }) }), (0, jsx_runtime_1.jsx)(AccessibleModal_js_1.default, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: "Accessibility Demo Modal", description: "This is an accessible modal dialog with focus trap and keyboard navigation.", children: (0, jsx_runtime_1.jsxs)("div", { className: "modal-content", children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-4", children: "This modal demonstrates accessibility features such as:" }), (0, jsx_runtime_1.jsxs)("ul", { className: "list-disc pl-5 mb-4", children: [(0, jsx_runtime_1.jsx)("li", { children: "Focus trap within the modal" }), (0, jsx_runtime_1.jsx)("li", { children: "Keyboard navigation (Tab, Shift+Tab)" }), (0, jsx_runtime_1.jsx)("li", { children: "ESC key to close" }), (0, jsx_runtime_1.jsx)("li", { children: "Proper ARIA attributes" }), (0, jsx_runtime_1.jsx)("li", { children: "Click outside to close" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end mt-6", children: (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: "secondary", onClick: () => setIsModalOpen(false), children: "Close" }) })] }) })] }));
};
// Wrap the demo with the provider for production use
const AccessibilitySystemDemoWithProvider = () => {
    return ((0, jsx_runtime_1.jsx)(AccessibilityProvider, { options: {
            conformance: 'AA',
            severity: 'warning',
            useAI: true,
            generateFixes: true,
        }, children: (0, jsx_runtime_1.jsx)(AccessibilitySystemDemo, {}) }));
};
exports.AccessibilitySystemDemoWithProvider = AccessibilitySystemDemoWithProvider;
exports.default = exports.AccessibilitySystemDemoWithProvider;
//# sourceMappingURL=AccessibilitySystemDemo.js.map