"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;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccessibleTabs = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
/**
 * Accessible Tabs component that follows WAI-ARIA best practices
 */
const AccessibleTabs = ({ 
// Core props
id, items = [], selectedTabId, defaultSelectedTabId, 
// State props
isDisabled = false, isLoading = false, 
// Style props
className = '', tabListClassName = '', tabClassName = '', tabPanelClassName = '', 
// Display options
showDescriptions = false, showIcons = false, isVertical = false, isCompact = false, isFilled = false, isOutlined = false, isPill = false, isAnimated = false, 
// ARIA props
ariaLabel, ariaDescribedby, tabPanelAriaLabel, tabPanelAriaDescribedby, 
// Debug options
showAccessibilityIssues = false, 
// Legacy props support
tabs = [], defaultIndex = 0, ...props }) => {
    // Support both modern (items) and legacy (tabs) API
    const tabItems = items.length > 0 ? items : tabs.map((tab, index) => ({
        id: `tab-${index}`,
        label: tab.label,
        content: tab.content,
        description: tab.description || '',
        isDisabled: tab.isDisabled || false,
        icon: tab.icon || ''
    }));
    // Initialize selected tab state
    const [activeTabId, setActiveTabId] = (0, react_1.useState)(() => {
        if (selectedTabId)
            return selectedTabId;
        if (defaultSelectedTabId)
            return defaultSelectedTabId;
        return tabItems.length > 0 ? tabItems[defaultIndex]?.id : '';
    });
    // Update active tab when selectedTabId changes (controlled component)
    (0, react_1.useEffect)(() => {
        if (selectedTabId !== undefined) {
            setActiveTabId(selectedTabId);
        }
    }, [selectedTabId]);
    // Track selected tab by index for backwards compatibility
    const activeIndex = tabItems.findIndex(tab => tab.id === activeTabId) || 0;
    // Create refs for keyboard navigation
    const tabRefs = (0, react_1.useRef)([]);
    tabRefs.current = tabItems.map((_, i) => tabRefs.current[i] || react_1.default.createRef());
    // Handle keyboard navigation
    const handleKeyDown = (e, index) => {
        let newIndex;
        switch (e.key) {
            case 'ArrowRight':
            case 'ArrowDown':
                e.preventDefault();
                newIndex = (index + 1) % tabItems.length;
                while (tabItems[newIndex]?.isDisabled && newIndex !== index) {
                    newIndex = (newIndex + 1) % tabItems.length;
                }
                tabRefs.current[newIndex]?.current?.focus();
                setActiveTabId(tabItems[newIndex]?.id);
                break;
            case 'ArrowLeft':
            case 'ArrowUp':
                e.preventDefault();
                newIndex = (index - 1 + tabItems.length) % tabItems.length;
                while (tabItems[newIndex]?.isDisabled && newIndex !== index) {
                    newIndex = (newIndex - 1 + tabItems.length) % tabItems.length;
                }
                tabRefs.current[newIndex]?.current?.focus();
                setActiveTabId(tabItems[newIndex]?.id);
                break;
            case 'Home':
                e.preventDefault();
                newIndex = 0;
                while (tabItems[newIndex]?.isDisabled && newIndex < tabItems.length - 1) {
                    newIndex++;
                }
                tabRefs.current[newIndex]?.current?.focus();
                setActiveTabId(tabItems[newIndex]?.id);
                break;
            case 'End':
                e.preventDefault();
                newIndex = tabItems.length - 1;
                while (tabItems[newIndex]?.isDisabled && newIndex > 0) {
                    newIndex--;
                }
                tabRefs.current[newIndex]?.current?.focus();
                setActiveTabId(tabItems[newIndex]?.id);
                break;
            default:
                break;
        }
    };
    // Build class names
    const containerClasses = [
        'accessible-tabs',
        isVertical ? 'flex flex-row' : '',
        isDisabled ? 'opacity-50 cursor-not-allowed' : '',
        isLoading ? 'opacity-75' : '',
        className
    ].filter(Boolean).join(' ');
    const tabListClasses = [
        'tabs-list',
        'flex',
        isVertical ? 'flex-col' : 'flex-row',
        isVertical ? 'mr-4' : 'mb-4',
        isPill ? 'rounded-full bg-gray-100 p-1' : '',
        isOutlined ? 'border border-gray-200 rounded' : '',
        tabListClassName
    ].filter(Boolean).join(' ');
    const getTabClasses = (tab, index) => {
        return [
            'tab',
            'px-4 py-2',
            'transition-colors duration-200',
            'focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75',
            activeTabId === tab.id ? 'active bg-blue-500 text-white' : 'hover:bg-gray-100',
            isCompact ? 'text-sm py-1' : '',
            isFilled && activeTabId === tab.id ? 'bg-blue-500 text-white' : '',
            isOutlined ? 'border-b border-transparent' : '',
            isOutlined && activeTabId === tab.id ? 'border-b-2 border-blue-500' : '',
            isPill ? 'rounded-full' : '',
            isPill && activeTabId === tab.id ? 'bg-white shadow' : '',
            tab.isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
            tabClassName
        ].filter(Boolean).join(' ');
    };
    const tabPanelClasses = [
        'tab-panel',
        isAnimated ? 'transition-opacity duration-300 ease-in-out' : '',
        tabPanelClassName
    ].filter(Boolean).join(' ');
    // Support for ExperienceBuilderIntegration which expects a items prop
    const tabsForPreview = tabItems.map(item => ({
        label: item.label,
        content: item.content,
    }));
    // Render loading state
    if (isLoading) {
        return ((0, jsx_runtime_1.jsx)("div", { className: containerClasses, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center p-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-blue-500 border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2", children: "Loading tabs..." })] }) }));
    }
    return ((0, jsx_runtime_1.jsxs)("div", { className: containerClasses, id: id, "data-accessibility": showAccessibilityIssues ? 'show' : 'hide', ...props, children: [(0, jsx_runtime_1.jsx)("div", { role: "tablist", className: tabListClasses, "aria-label": ariaLabel || 'Tabs', "aria-describedby": ariaDescribedby, "aria-orientation": isVertical ? 'vertical' : 'horizontal', children: tabItems.map((tab, index) => ((0, jsx_runtime_1.jsxs)("button", { ref: tabRefs.current[index], role: "tab", id: `tab-${tab.id || index}`, className: getTabClasses(tab, index), "aria-selected": activeTabId === tab.id, "aria-controls": `panel-${tab.id || index}`, "aria-disabled": tab.isDisabled || isDisabled, tabIndex: activeTabId === tab.id ? 0 : -1, onClick: () => !tab.isDisabled && !isDisabled && setActiveTabId(tab.id), onKeyDown: (e) => handleKeyDown(e, index), disabled: tab.isDisabled || isDisabled, children: [showIcons && tab.icon && ((0, jsx_runtime_1.jsx)("span", { className: "tab-icon mr-2", children: tab.icon })), (0, jsx_runtime_1.jsx)("span", { className: "tab-label", children: tab.label }), showDescriptions && tab.description && ((0, jsx_runtime_1.jsx)("span", { className: "tab-description text-xs ml-2 text-gray-500", children: tab.description }))] }, tab.id || index))) }), (0, jsx_runtime_1.jsx)("div", { className: "tab-panels", children: tabItems.map((tab, index) => ((0, jsx_runtime_1.jsx)("div", { role: "tabpanel", id: `panel-${tab.id || index}`, className: tabPanelClasses, "aria-labelledby": `tab-${tab.id || index}`, "aria-label": tabPanelAriaLabel, "aria-describedby": tabPanelAriaDescribedby, hidden: activeTabId !== tab.id, tabIndex: 0, children: tab.content }, tab.id || index))) })] }));
};
exports.AccessibleTabs = AccessibleTabs;
exports.default = exports.AccessibleTabs;
//# sourceMappingURL=AccessibleTabs.js.map