"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExperienceBuilderComponents = exports.getComponentDefinitions = exports.ExperienceBuilderProvider = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * Experience Builder Integration Layer
 * Adapts our accessible components for Drupal Experience Builder SDC pattern
 */
const react_1 = __importDefault(require("react"));
const AccessibleButton_1 = require("../../components/modern/AccessibleButton");
const AccessibleInput_1 = require("../../components/modern/AccessibleInput");
const AccessibleSelect_1 = require("../../components/modern/AccessibleSelect");
const AccessibleCheckbox_1 = require("../../components/modern/AccessibleCheckbox");
const AccessibleRadio_1 = require("../../components/modern/AccessibleRadio");
const AccessibleTabs_1 = require("../../components/modern/AccessibleTabs");
const AccessibilitySystem_1 = require("../../components/accessibility/AccessibilitySystem");
// Define Experience Builder component definitions
const componentDefinitions = {
    'bfui-button': {
        name: 'bfui-button',
        label: 'Accessible Button',
        category: 'BFUI Components',
        icon: 'button',
        fields: {
            label: {
                type: 'string',
                label: 'Button Label',
                required: true,
            },
            variant: {
                type: 'select',
                label: 'Variant',
                options: [
                    { value: 'primary', label: 'Primary' },
                    { value: 'secondary', label: 'Secondary' },
                    { value: 'tertiary', label: 'Tertiary' },
                    { value: 'danger', label: 'Danger' },
                ],
                default: 'primary',
            },
            size: {
                type: 'select',
                label: 'Size',
                options: [
                    { value: 'sm', label: 'Small' },
                    { value: 'md', label: 'Medium' },
                    { value: 'lg', label: 'Large' },
                ],
                default: 'md',
            },
            icon: {
                type: 'select',
                label: 'Icon',
                options: [
                    { value: '', label: 'None' },
                    { value: 'plus', label: 'Plus' },
                    { value: 'check', label: 'Check' },
                    { value: 'trash', label: 'Trash' },
                ],
                default: '',
            },
            iconPosition: {
                type: 'select',
                label: 'Icon Position',
                options: [
                    { value: 'start', label: 'Start' },
                    { value: 'end', label: 'End' },
                ],
                default: 'start',
            },
            isLoading: {
                type: 'boolean',
                label: 'Loading State',
                default: false,
            },
            isDisabled: {
                type: 'boolean',
                label: 'Disabled State',
                default: false,
            },
            onClick: {
                type: 'action',
                label: 'Click Action',
            },
        },
        preview: ({ fields }) => ((0, jsx_runtime_1.jsx)(AccessibleButton_1.AccessibleButton, { label: fields.label, variant: fields.variant, size: fields.size, icon: fields.icon, iconPosition: fields.iconPosition, isLoading: fields.isLoading, isDisabled: fields.isDisabled, onClick: () => fields.onClick?.() })),
    },
    'bfui-input': {
        name: 'bfui-input',
        label: 'Accessible Input',
        category: 'BFUI Components',
        icon: 'input',
        fields: {
            label: {
                type: 'string',
                label: 'Input Label',
                required: true,
            },
            type: {
                type: 'select',
                label: 'Input Type',
                options: [
                    { value: 'text', label: 'Text' },
                    { value: 'email', label: 'Email' },
                    { value: 'password', label: 'Password' },
                    { value: 'number', label: 'Number' },
                    { value: 'tel', label: 'Telephone' },
                    { value: 'url', label: 'URL' },
                ],
                default: 'text',
            },
            placeholder: {
                type: 'string',
                label: 'Placeholder',
            },
            helperText: {
                type: 'string',
                label: 'Helper Text',
            },
            error: {
                type: 'string',
                label: 'Error Message',
            },
            isRequired: {
                type: 'boolean',
                label: 'Required',
                default: false,
            },
            isDisabled: {
                type: 'boolean',
                label: 'Disabled',
                default: false,
            },
            maxLength: {
                type: 'number',
                label: 'Max Length',
            },
            showCounter: {
                type: 'boolean',
                label: 'Show Character Counter',
                default: false,
            },
            onChange: {
                type: 'action',
                label: 'Change Action',
            },
            onBlur: {
                type: 'action',
                label: 'Blur Action',
            },
        },
        preview: ({ fields }) => ((0, jsx_runtime_1.jsx)(AccessibleInput_1.AccessibleInput, { label: fields.label, type: fields.type, placeholder: fields.placeholder, helperText: fields.helperText, error: fields.error, isRequired: fields.isRequired, isDisabled: fields.isDisabled, maxLength: fields.maxLength, showCounter: fields.showCounter, onChange: (e) => fields.onChange?.(e.target.value), onBlur: () => fields.onBlur?.() })),
    },
    'bfui-select': {
        name: 'bfui-select',
        label: 'Accessible Select',
        category: 'BFUI Components',
        icon: 'select',
        fields: {
            label: {
                type: 'string',
                label: 'Select Label',
                required: true,
            },
            options: {
                type: 'array',
                label: 'Options',
                items: {
                    type: 'object',
                    fields: {
                        label: { type: 'string', label: 'Label' },
                        value: { type: 'string', label: 'Value' },
                        group: { type: 'string', label: 'Group' },
                        description: { type: 'string', label: 'Description' },
                        isDisabled: { type: 'boolean', label: 'Disabled' },
                    },
                },
                required: true,
            },
            placeholder: {
                type: 'string',
                label: 'Placeholder',
            },
            helperText: {
                type: 'string',
                label: 'Helper Text',
            },
            error: {
                type: 'string',
                label: 'Error Message',
            },
            isRequired: {
                type: 'boolean',
                label: 'Required',
                default: false,
            },
            isDisabled: {
                type: 'boolean',
                label: 'Disabled',
                default: false,
            },
            isSearchable: {
                type: 'boolean',
                label: 'Searchable',
                default: false,
            },
            onChange: {
                type: 'action',
                label: 'Change Action',
            },
        },
        preview: ({ fields }) => ((0, jsx_runtime_1.jsx)(AccessibleSelect_1.AccessibleSelect, { label: fields.label, options: fields.options, placeholder: fields.placeholder, helperText: fields.helperText, error: fields.error, isRequired: fields.isRequired, isDisabled: fields.isDisabled, isSearchable: fields.isSearchable, onChange: (value) => fields.onChange?.(value) })),
    },
    'bfui-checkbox': {
        name: 'bfui-checkbox',
        label: 'Accessible Checkbox',
        category: 'BFUI Components',
        icon: 'checkbox',
        fields: {
            label: {
                type: 'string',
                label: 'Checkbox Label',
                required: true,
            },
            helperText: {
                type: 'string',
                label: 'Helper Text',
            },
            error: {
                type: 'string',
                label: 'Error Message',
            },
            isRequired: {
                type: 'boolean',
                label: 'Required',
                default: false,
            },
            isDisabled: {
                type: 'boolean',
                label: 'Disabled',
                default: false,
            },
            isIndeterminate: {
                type: 'boolean',
                label: 'Indeterminate',
                default: false,
            },
            onChange: {
                type: 'action',
                label: 'Change Action',
            },
        },
        preview: ({ fields }) => ((0, jsx_runtime_1.jsx)(AccessibleCheckbox_1.AccessibleCheckbox, { label: fields.label, helperText: fields.helperText, error: fields.error, isRequired: fields.isRequired, isDisabled: fields.isDisabled, isIndeterminate: fields.isIndeterminate, onChange: (checked) => fields.onChange?.(checked) })),
    },
    radio: {
        name: 'Accessible Radio',
        description: 'A modern, accessible radio group component with built-in validation and accessibility analysis.',
        component: AccessibleRadio_1.AccessibleRadio,
        fields: {
            label: {
                type: 'string',
                label: 'Label',
                required: true,
            },
            name: {
                type: 'string',
                label: 'Name',
                required: true,
            },
            options: {
                type: 'array',
                label: 'Options',
                required: true,
                items: {
                    type: 'object',
                    properties: {
                        label: {
                            type: 'string',
                            label: 'Label',
                            required: true,
                        },
                        value: {
                            type: 'string',
                            label: 'Value',
                            required: true,
                        },
                        description: {
                            type: 'string',
                            label: 'Description',
                        },
                        isDisabled: {
                            type: 'boolean',
                            label: 'Disabled',
                        },
                    },
                },
            },
            value: {
                type: 'string',
                label: 'Value',
            },
            defaultValue: {
                type: 'string',
                label: 'Default Value',
            },
            helperText: {
                type: 'string',
                label: 'Helper Text',
            },
            error: {
                type: 'string',
                label: 'Error Message',
            },
            isRequired: {
                type: 'boolean',
                label: 'Required',
            },
            isDisabled: {
                type: 'boolean',
                label: 'Disabled',
            },
            isHorizontal: {
                type: 'boolean',
                label: 'Horizontal Layout',
            },
            showDescriptions: {
                type: 'boolean',
                label: 'Show Descriptions',
            },
            className: {
                type: 'string',
                label: 'Custom Class Name',
            },
            optionsClassName: {
                type: 'string',
                label: 'Options Custom Class Name',
            },
            optionClassName: {
                type: 'string',
                label: 'Option Custom Class Name',
            },
            ariaLabel: {
                type: 'string',
                label: 'ARIA Label',
            },
            ariaDescribedby: {
                type: 'string',
                label: 'ARIA Described By',
            },
            showAccessibilityIssues: {
                type: 'boolean',
                label: 'Show Accessibility Issues',
            },
        },
        preview: (props) => ((0, jsx_runtime_1.jsx)(AccessibleRadio_1.AccessibleRadio, { ...props, options: props.options || [
                { label: 'Option 1', value: '1' },
                { label: 'Option 2', value: '2' },
                { label: 'Option 3', value: '3', description: 'Description for option 3' },
            ] })),
    },
    tabs: {
        name: 'Accessible Tabs',
        description: 'A modern, accessible tabs component with built-in validation and accessibility analysis.',
        component: AccessibleTabs_1.AccessibleTabs,
        fields: {
            id: {
                type: 'string',
                label: 'ID',
                required: true,
            },
            items: {
                type: 'array',
                label: 'Tab Items',
                required: true,
                items: {
                    type: 'object',
                    properties: {
                        id: {
                            type: 'string',
                            label: 'ID',
                            required: true,
                        },
                        label: {
                            type: 'string',
                            label: 'Label',
                            required: true,
                        },
                        content: {
                            type: 'string',
                            label: 'Content',
                            required: true,
                        },
                        description: {
                            type: 'string',
                            label: 'Description',
                        },
                        isDisabled: {
                            type: 'boolean',
                            label: 'Disabled',
                        },
                        icon: {
                            type: 'string',
                            label: 'Icon',
                        },
                    },
                },
            },
            selectedTabId: {
                type: 'string',
                label: 'Selected Tab ID',
            },
            defaultSelectedTabId: {
                type: 'string',
                label: 'Default Selected Tab ID',
            },
            isDisabled: {
                type: 'boolean',
                label: 'Disabled',
            },
            isLoading: {
                type: 'boolean',
                label: 'Loading',
            },
            className: {
                type: 'string',
                label: 'Custom Class Name',
            },
            tabListClassName: {
                type: 'string',
                label: 'Tab List Custom Class Name',
            },
            tabClassName: {
                type: 'string',
                label: 'Tab Custom Class Name',
            },
            tabPanelClassName: {
                type: 'string',
                label: 'Tab Panel Custom Class Name',
            },
            showDescriptions: {
                type: 'boolean',
                label: 'Show Descriptions',
            },
            showIcons: {
                type: 'boolean',
                label: 'Show Icons',
            },
            isVertical: {
                type: 'boolean',
                label: 'Vertical Layout',
            },
            isCompact: {
                type: 'boolean',
                label: 'Compact',
            },
            isFilled: {
                type: 'boolean',
                label: 'Filled',
            },
            isOutlined: {
                type: 'boolean',
                label: 'Outlined',
            },
            isPill: {
                type: 'boolean',
                label: 'Pill',
            },
            isAnimated: {
                type: 'boolean',
                label: 'Animated',
            },
            ariaLabel: {
                type: 'string',
                label: 'ARIA Label',
            },
            ariaDescribedby: {
                type: 'string',
                label: 'ARIA Described By',
            },
            tabPanelAriaLabel: {
                type: 'string',
                label: 'Tab Panel ARIA Label',
            },
            tabPanelAriaDescribedby: {
                type: 'string',
                label: 'Tab Panel ARIA Described By',
            },
            showAccessibilityIssues: {
                type: 'boolean',
                label: 'Show Accessibility Issues',
            },
        },
        preview: (props) => ((0, jsx_runtime_1.jsx)(AccessibleTabs_1.AccessibleTabs, { ...props, items: props.items || [
                {
                    id: 'tab1',
                    label: 'Tab 1',
                    content: 'Content for tab 1',
                    description: 'Description for tab 1',
                },
                {
                    id: 'tab2',
                    label: 'Tab 2',
                    content: 'Content for tab 2',
                    description: 'Description for tab 2',
                },
                {
                    id: 'tab3',
                    label: 'Tab 3',
                    content: 'Content for tab 3',
                    description: 'Description for tab 3',
                    isDisabled: true,
                },
            ] })),
    },
};
// Experience Builder Integration Provider
const ExperienceBuilderProvider = ({ children }) => {
    const analyzeComponent = AccessibilitySystem_1.AccessibilitySystem.runA11yAudit;
    // Register components with Experience Builder
    react_1.default.useEffect(() => {
        const registerComponents = async () => {
            try {
                // @ts-ignore - Experience Builder types
                const { registerComponent } = await Promise.resolve().then(() => __importStar(require('@drupal/experience-builder')));
                // Register each component with accessibility analysis
                for (const [name, definition] of Object.entries(componentDefinitions)) {
                    // Analyze component for accessibility
                    const analysis = await analyzeComponent(definition.preview);
                    // Add accessibility metadata to component definition
                    const enhancedDefinition = {
                        ...definition,
                        metadata: {
                            ...definition.metadata,
                            accessibility: {
                                score: analysis.score,
                                issues: analysis.issues,
                                wcagCriteria: analysis.wcagCriteria,
                            },
                        },
                    };
                    // Register component with Experience Builder
                    registerComponent(name, enhancedDefinition);
                }
            }
            catch (error) {
                console.error('Failed to register components with Experience Builder:', error);
            }
        };
        registerComponents();
    }, [analyzeComponent]);
    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
};
exports.ExperienceBuilderProvider = ExperienceBuilderProvider;
// Export component definitions for direct use
const getComponentDefinitions = () => componentDefinitions;
exports.getComponentDefinitions = getComponentDefinitions;
// Export individual components for direct use
exports.ExperienceBuilderComponents = {
    Button: componentDefinitions['bfui-button'],
    Input: componentDefinitions['bfui-input'],
    Select: componentDefinitions['bfui-select'],
    Checkbox: componentDefinitions['bfui-checkbox'],
    Radio: componentDefinitions['radio'],
    Tabs: componentDefinitions['tabs'],
};
//# sourceMappingURL=ExperienceBuilderIntegration.js.map