import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect, useMemo, createContext, useContext } from "react";
import { useSearchParams } from "react-router-dom";
const TabsContext = createContext(undefined);
export const useTabsContext = () => {
    const context = useContext(TabsContext);
    if (!context) {
        throw new Error("TabPanel must be used within TabsGroup");
    }
    return context;
};
export const TabsGroup = ({ children, tabs, paramName, headerNode, onChangeTab, }) => {
    const [searchParams, setSearchParams] = useSearchParams();
    const defaultTab = tabs[0]?.id?.toString() || "";
    // Obtener el tab activo desde URL params si paramName está definido, sino desde estado local
    const urlTab = paramName ? searchParams.get(paramName) : null;
    const initialTab = urlTab || defaultTab;
    const [activeTab, setActiveTabState] = useState(initialTab);
    // Sincronizar con URL params cuando cambian
    useEffect(() => {
        if (paramName && urlTab) {
            setActiveTabState(urlTab);
        }
    }, [paramName, urlTab]);
    const setActiveTab = (tab) => {
        setActiveTabState(tab);
        // Actualizar URL params si paramName está definido
        if (paramName) {
            const newSearchParams = new URLSearchParams(searchParams);
            newSearchParams.set(paramName, tab.toString());
            setSearchParams(newSearchParams, { replace: true });
        }
        // Llamar al callback si está definido
        if (onChangeTab) {
            onChangeTab(tab.toString());
        }
    };
    const contextValue = useMemo(() => ({ activeTab, setActiveTab }), [activeTab]);
    const handleTabClick = (tabId) => {
        setActiveTab(tabId);
    };
    return (_jsx(TabsContext.Provider, { value: contextValue, children: _jsxs("div", { className: "w-full font-[var(--font-default)]", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[var(--color-border-default)]", children: [_jsx("div", { className: "flex items-center gap-1", children: tabs.map((tab) => {
                                const isActive = activeTab.toString() === tab.id.toString();
                                return (_jsx("button", { onClick: () => handleTabClick(tab.id), className: `
                    px-4 py-2 text-sm font-medium transition-colors cursor-pointer
                    border-b-2 -mb-[1px]
                    ${isActive
                                        ? "text-[var(--color-primary)] border-[var(--color-primary)]"
                                        : "text-[var(--color-text-secondary)] border-transparent hover:text-[var(--color-text-primary)] hover:border-[var(--color-border-default)]"}
                  `, "aria-selected": isActive, role: "tab", children: tab.label }, tab.id));
                            }) }), headerNode && (_jsx("div", { className: "flex items-center", children: headerNode }))] }), _jsx("div", { className: "mt-4", children: children })] }) }));
};
