"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.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.TailwindTabs = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const cn_js_1 = require("../utils/cn.js");
// Context
const TabsContext = (0, react_1.createContext)(undefined);
const useTabs = () => {
    const context = (0, react_1.useContext)(TabsContext);
    if (!context) {
        throw new Error('Tabs components must be used within a TabsProvider');
    }
    return context;
};
/**
 * Tabs component with animated transitions
 *
 * A flexible tabs component that supports various styles and orientations
 * with smooth animations and keyboard navigation.
 *
 * @example
 * // Basic usage
 * <TailwindTabs>
 *   <TabList>
 *     <Tab>Tab 1</Tab>
 *     <Tab>Tab 2</Tab>
 *     <Tab>Tab 3</Tab>
 *   </TabList>
 *   <TabPanels>
 *     <TabPanel>Content 1</TabPanel>
 *     <TabPanel>Content 2</TabPanel>
 *     <TabPanel>Content 3</TabPanel>
 *   </TabPanels>
 * </TailwindTabs>
 *
 * @example
 * // With different variant
 * <TailwindTabs variant="solid-rounded">
 *   <TabList>
 *     <Tab>Tab 1</Tab>
 *     <Tab>Tab 2</Tab>
 *   </TabList>
 *   <TabPanels>
 *     <TabPanel>Content 1</TabPanel>
 *     <TabPanel>Content 2</TabPanel>
 *   </TabPanels>
 * </TailwindTabs>
 */
exports.TailwindTabs = (0, react_1.forwardRef)(({ defaultIndex = 0, onChange, variant = 'underline', size = 'md', orientation = 'horizontal', animated = true, isManual = false, isFitted = false, children, className, ...props }, ref) => {
    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(defaultIndex);
    const id = (0, react_1.useRef)(`tabs-${Math.random().toString(36).substring(2, 9)}`).current;
    const handleChange = (index) => {
        setSelectedIndex(index);
        onChange?.(index);
    };
    const tabsClasses = (0, cn_js_1.cn)('w-full', orientation === 'vertical' ? 'flex flex-row' : 'flex flex-col', className);
    return ((0, jsx_runtime_1.jsx)(TabsContext.Provider, { value: {
            selectedIndex,
            setSelectedIndex: handleChange,
            variant,
            size,
            orientation,
            animated,
            isManual,
            id
        }, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: tabsClasses, "data-orientation": orientation, ...props, children: children }) }));
});
exports.TabList = (0, react_1.forwardRef)(({ children, className, ...props }, ref) => {
    const { orientation, variant, size, id } = useTabs();
    // Base classes
    const baseClasses = (0, cn_js_1.cn)('flex', 'relative', orientation === 'horizontal' ? 'flex-row' : 'flex-col', {
        'border-b border-gray-200 dark:border-gray-700': variant === 'underline' && orientation === 'horizontal',
        'border-r border-gray-200 dark:border-gray-700': variant === 'underline' && orientation === 'vertical',
        'rounded-md bg-gray-100 dark:bg-gray-800 p-1': variant === 'enclosed',
        'gap-1': variant === 'soft-rounded' || variant === 'solid-rounded',
        'p-0': variant === 'unstyled',
    }, className);
    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, role: "tablist", "aria-orientation": orientation, className: baseClasses, ...props, children: react_1.default.Children.map(children, (child, index) => {
            if (!react_1.default.isValidElement(child))
                return null;
            return react_1.default.cloneElement(child, {
                ...child.props,
                id: `${id}-tab-${index}`,
                'aria-controls': `${id}-tabpanel-${index}`,
                index,
            });
        }) }));
});
exports.Tab = (0, react_1.forwardRef)(({ children, isDisabled = false, className, index, ...props }, ref) => {
    const { selectedIndex, setSelectedIndex, variant, size, orientation, isManual, id } = useTabs();
    const isSelected = index === selectedIndex;
    // Handle keyboard navigation
    const handleKeyDown = (e) => {
        if (isDisabled)
            return;
        const tabCount = document.querySelectorAll(`[id^="${id}-tab-"]`).length;
        let nextIndex = selectedIndex;
        if (orientation === 'horizontal') {
            if (e.key === 'ArrowRight') {
                nextIndex = (selectedIndex + 1) % tabCount;
            }
            else if (e.key === 'ArrowLeft') {
                nextIndex = (selectedIndex - 1 + tabCount) % tabCount;
            }
        }
        else {
            if (e.key === 'ArrowDown') {
                nextIndex = (selectedIndex + 1) % tabCount;
            }
            else if (e.key === 'ArrowUp') {
                nextIndex = (selectedIndex - 1 + tabCount) % tabCount;
            }
        }
        if (e.key === 'Home') {
            nextIndex = 0;
        }
        else if (e.key === 'End') {
            nextIndex = tabCount - 1;
        }
        if (nextIndex !== selectedIndex) {
            e.preventDefault();
            setSelectedIndex(nextIndex);
        }
    };
    // Size-specific classes
    const sizeClasses = {
        sm: 'px-3 py-1.5 text-sm',
        md: 'px-4 py-2 text-base',
        lg: 'px-6 py-3 text-lg',
    };
    // Variant-specific classes
    const variantClasses = {
        underline: (0, cn_js_1.cn)('border-b-2 font-medium', isSelected
            ? 'border-primary-600 text-primary-600 dark:border-primary-400 dark:text-primary-400'
            : 'border-transparent text-gray-600 hover:text-gray-800 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'),
        enclosed: (0, cn_js_1.cn)('font-medium', isSelected
            ? 'bg-white dark:bg-gray-700 rounded shadow'
            : 'bg-transparent hover:bg-gray-50 dark:hover:bg-gray-700'),
        'soft-rounded': (0, cn_js_1.cn)('font-medium rounded-full', isSelected
            ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-100'
            : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800'),
        'solid-rounded': (0, cn_js_1.cn)('font-medium rounded-full', isSelected
            ? 'bg-primary-600 text-white dark:bg-primary-500'
            : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700'),
        unstyled: 'bg-transparent',
    };
    // Button classes
    const buttonClasses = (0, cn_js_1.cn)('flex items-center justify-center relative transition-all', 'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500', 'disabled:opacity-50 disabled:cursor-not-allowed', sizeClasses[size], variantClasses[variant], orientation === 'vertical' && 'justify-start', className);
    return ((0, jsx_runtime_1.jsx)("button", { ref: ref, role: "tab", id: `${id}-tab-${index}`, "aria-selected": isSelected, "aria-controls": isSelected ? `${id}-tabpanel-${index}` : undefined, tabIndex: isSelected ? 0 : -1, disabled: isDisabled, onClick: isDisabled ? undefined : () => setSelectedIndex(index), onKeyDown: handleKeyDown, onFocus: isManual ? undefined : () => !isDisabled && setSelectedIndex(index), className: buttonClasses, ...props, children: children }));
});
exports.TabPanels = (0, react_1.forwardRef)(({ children, className, ...props }, ref) => {
    const { orientation, id } = useTabs();
    const panelsClasses = (0, cn_js_1.cn)('w-full', orientation === 'vertical' ? 'pl-4' : 'mt-4', className);
    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: panelsClasses, ...props, children: react_1.default.Children.map(children, (child, index) => {
            if (!react_1.default.isValidElement(child))
                return null;
            return react_1.default.cloneElement(child, {
                ...child.props,
                id: `${id}-tabpanel-${index}`,
                'aria-labelledby': `${id}-tab-${index}`,
                index,
            });
        }) }));
});
exports.TabPanel = (0, react_1.forwardRef)(({ children, className, index, ...props }, ref) => {
    const { selectedIndex, animated } = useTabs();
    const isSelected = index === selectedIndex;
    // Animation refs
    const panelRef = (0, react_1.useRef)(null);
    const firstRender = (0, react_1.useRef)(true);
    // Combined ref
    const combinedRef = useCombinedRefs(ref, panelRef);
    // Handle animation
    (0, react_1.useEffect)(() => {
        if (!animated || !panelRef.current || firstRender.current) {
            firstRender.current = false;
            return;
        }
        const panel = panelRef.current;
        if (isSelected) {
            panel.style.opacity = '0';
            panel.style.transform = 'translateY(10px)';
            // Trigger animation
            setTimeout(() => {
                panel.style.transition = 'opacity 250ms ease, transform 250ms ease';
                panel.style.opacity = '1';
                panel.style.transform = 'translateY(0)';
            }, 50);
        }
    }, [isSelected, animated]);
    const panelClasses = (0, cn_js_1.cn)('focus:outline-none', animated && 'transition-opacity duration-250', className);
    if (!isSelected) {
        return null;
    }
    return ((0, jsx_runtime_1.jsx)("div", { ref: combinedRef, role: "tabpanel", tabIndex: 0, id: `${id}-tabpanel-${index}`, "aria-labelledby": `${id}-tab-${index}`, className: panelClasses, ...props, children: children }));
});
// Helper function to combine refs
function useCombinedRefs(...refs) {
    const targetRef = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(() => {
        refs.forEach(ref => {
            if (!ref)
                return;
            if (typeof ref === 'function') {
                ref(targetRef.current);
            }
            else {
                ref.current = targetRef.current;
            }
        });
    }, [refs]);
    return targetRef;
}
// Display names
exports.TailwindTabs.displayName = 'TailwindTabs';
exports.TabList.displayName = 'TabList';
exports.Tab.displayName = 'Tab';
exports.TabPanels.displayName = 'TabPanels';
exports.TabPanel.displayName = 'TabPanel';
exports.default = exports.TailwindTabs;
//# sourceMappingURL=TailwindTabs.js.map