"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccessibilityDemo = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const AccessibleButton_js_1 = __importDefault(require("./AccessibleButton.js"));
// Simple component mock implementations
const AccessibilityProvider = ({ children }) => {
    return (0, jsx_runtime_1.jsx)("div", { className: "accessibility-provider", children: children });
};
const AccessibilityChecker = () => {
    return ((0, jsx_runtime_1.jsxs)("div", { className: "accessibility-checker", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Accessibility Analysis" }), (0, jsx_runtime_1.jsx)("p", { children: "No accessibility issues found." })] }));
};
const AccessibilityPreview = ({ component, mode = 'normal' }) => {
    const styles = mode === 'colorblind'
        ? { filter: 'grayscale(100%)' }
        : mode === 'high-contrast'
            ? { filter: 'contrast(200%)' }
            : {};
    return ((0, jsx_runtime_1.jsxs)("div", { className: "accessibility-preview", children: [(0, jsx_runtime_1.jsx)("div", { style: styles, children: component }), mode === 'screen-reader' && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { children: "Screen Reader View" }), (0, jsx_runtime_1.jsx)("p", { children: "This is a simplified screen reader view." })] }))] }));
};
const AccessibilityScore = () => {
    return ((0, jsx_runtime_1.jsxs)("div", { className: "accessibility-score", children: [(0, jsx_runtime_1.jsx)("div", { style: {
                    backgroundColor: '#4CAF50',
                    color: 'white',
                    width: '100px',
                    height: '100px',
                    borderRadius: '50%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: '24px',
                    fontWeight: 'bold'
                }, children: "100%" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { children: "Accessibility Score" }), (0, jsx_runtime_1.jsx)("p", { children: "Based on 0 issues" })] })] }));
};
const demoComponents = [
    {
        name: 'Button with Icons',
        component: ((0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: "primary", leftIcon: (0, jsx_runtime_1.jsx)("span", { children: "\u2190" }), rightIcon: (0, jsx_runtime_1.jsx)("span", { children: "\u2192" }), children: "Navigate" })),
        source: `
      <AccessibleButton
        variant="primary"
        leftIcon={<span>←</span>}
        rightIcon={<span>→</span>}
      >
        Navigate
      </AccessibleButton>
    `,
    },
    {
        name: 'Loading Button',
        component: ((0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: "secondary", isLoading: true, children: "Submit" })),
        source: `
      <AccessibleButton
        variant="secondary"
        isLoading
      >
        Submit
      </AccessibleButton>
    `,
    },
    {
        name: 'Disabled Button',
        component: ((0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: "danger", disabled: true, children: "Delete" })),
        source: `
      <AccessibleButton
        variant="danger"
        disabled
      >
        Delete
      </AccessibleButton>
    `,
    },
    {
        name: 'Full Width Button',
        component: ((0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: "success", fullWidth: true, children: "Save Changes" })),
        source: `
      <AccessibleButton
        variant="success"
        fullWidth
      >
        Save Changes
      </AccessibleButton>
    `,
    },
];
const AccessibilityDemo = () => {
    const [selectedComponent, setSelectedComponent] = (0, react_1.useState)(demoComponents[0]);
    const [previewMode, setPreviewMode] = (0, react_1.useState)('normal');
    return ((0, jsx_runtime_1.jsxs)(AccessibilityProvider, { options: {
            conformance: 'AA',
            severity: 'warning',
            useAI: true,
            generateFixes: true,
        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "accessibility-demo", children: [(0, jsx_runtime_1.jsxs)("header", { className: "demo-header", children: [(0, jsx_runtime_1.jsx)("h1", { children: "Accessibility Demo" }), (0, jsx_runtime_1.jsx)("p", { children: "Explore our modern, accessible components with real-time validation" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "demo-controls", children: [(0, jsx_runtime_1.jsxs)("div", { className: "component-selector", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Select Component" }), (0, jsx_runtime_1.jsx)("div", { className: "component-list", children: demoComponents.map((component) => ((0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: selectedComponent === component ? 'primary' : 'secondary', onClick: () => setSelectedComponent(component), children: component.name }, component.name))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "preview-controls", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Preview Mode" }), (0, jsx_runtime_1.jsxs)("div", { className: "mode-selector", children: [(0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: previewMode === 'normal' ? 'primary' : 'secondary', onClick: () => setPreviewMode('normal'), children: "Normal" }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: previewMode === 'colorblind' ? 'primary' : 'secondary', onClick: () => setPreviewMode('colorblind'), children: "Colorblind" }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: previewMode === 'high-contrast' ? 'primary' : 'secondary', onClick: () => setPreviewMode('high-contrast'), children: "High Contrast" }), (0, jsx_runtime_1.jsx)(AccessibleButton_js_1.default, { variant: previewMode === 'screen-reader' ? 'primary' : 'secondary', onClick: () => setPreviewMode('screen-reader'), children: "Screen Reader" })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "demo-content", children: [(0, jsx_runtime_1.jsxs)("div", { className: "preview-section", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Preview" }), (0, jsx_runtime_1.jsx)(AccessibilityPreview, { component: selectedComponent.component, mode: previewMode })] }), (0, jsx_runtime_1.jsxs)("div", { className: "analysis-section", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Accessibility Analysis" }), (0, jsx_runtime_1.jsx)(AccessibilityChecker, { component: selectedComponent.component, source: selectedComponent.source })] }), (0, jsx_runtime_1.jsxs)("div", { className: "score-section", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Accessibility Score" }), (0, jsx_runtime_1.jsx)(AccessibilityScore, { results: [] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "demo-footer", children: [(0, jsx_runtime_1.jsx)("h2", { children: "Component Source" }), (0, jsx_runtime_1.jsx)("pre", { className: "source-code", children: (0, jsx_runtime_1.jsx)("code", { children: selectedComponent.source }) })] })] }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
        .accessibility-demo {
          max-width: 1200px;
          margin: 0 auto;
          padding: 2rem;
          font-family: system-ui, -apple-system, sans-serif;
        }

        .demo-header {
          text-align: center;
          margin-bottom: 2rem;
        }

        .demo-header h1 {
          font-size: 2.5rem;
          color: var(--color-primary);
          margin-bottom: 0.5rem;
        }

        .demo-controls {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
          margin-bottom: 2rem;
        }

        .component-selector,
        .preview-controls {
          background: var(--color-background-alt);
          padding: 1.5rem;
          border-radius: 0.5rem;
        }

        .component-list,
        .mode-selector {
          display: flex;
          flex-wrap: wrap;
          gap: 1rem;
          margin-top: 1rem;
        }

        .demo-content {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 2rem;
          margin-bottom: 2rem;
        }

        .preview-section {
          grid-column: 1 / -1;
          background: var(--color-background-alt);
          padding: 1.5rem;
          border-radius: 0.5rem;
        }

        .analysis-section,
        .score-section {
          background: var(--color-background-alt);
          padding: 1.5rem;
          border-radius: 0.5rem;
        }

        .demo-footer {
          background: var(--color-background-alt);
          padding: 1.5rem;
          border-radius: 0.5rem;
        }

        .source-code {
          background: var(--color-background);
          padding: 1rem;
          border-radius: 0.25rem;
          overflow-x: auto;
          font-family: monospace;
        }

        h2 {
          font-size: 1.5rem;
          color: var(--color-text);
          margin-bottom: 1rem;
        }

        @media (max-width: 768px) {
          .demo-controls,
          .demo-content {
            grid-template-columns: 1fr;
          }

          .component-list,
          .mode-selector {
            flex-direction: column;
          }
        }
      ` })] }));
};
exports.AccessibilityDemo = AccessibilityDemo;
exports.default = exports.AccessibilityDemo;
//# sourceMappingURL=AccessibilityDemo.js.map