import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { isValidElement, useEffect, useState } from 'react';
import { TabsContext, useTabs } from './TabsContext.js';
function applyCurrentTab(tabs, current) {
    const name = typeof current === 'function' ? current() : current;
    let currentTab = null;
    const newTabs = [];
    for (const tab of tabs) {
        const newTab = { ...tab };
        newTab.current = false;
        newTabs.push(newTab);
        if (newTab.name === name) {
            currentTab = newTab;
        }
    }
    if (!currentTab) {
        currentTab = newTabs[0];
    }
    currentTab.current = true;
    return newTabs;
}
export function Tabs({ current, onSelect, tabs, children, navigate }) {
    const [_tabs, _setTabs] = useState([]);
    useEffect(() => {
        _setTabs(applyCurrentTab(tabs, current));
    }, [current, tabs]);
    const context = {
        tabs: _tabs,
        select: (tab) => {
            if (onSelect) {
                if (onSelect(tab) === false) {
                    return;
                }
            }
            if (tab.href) {
                if (navigate) {
                    navigate(tab.href);
                }
                else {
                    window.location.href = tab.href;
                }
            }
            else {
                _setTabs([...applyCurrentTab(_tabs, tab.name)]);
            }
        }
    };
    return (_jsx(TabsContext.Provider, { value: context, children: _jsx("div", { className: "flex flex-col h-full", children: children }) }));
}
export function TabsBar({ actions, className }) {
    const { tabs, select } = useTabs();
    const _onClick = (e, tab) => {
        e.preventDefault();
        e.stopPropagation();
        // ignore if disabled
        !tab.disabled && select(tab);
    };
    return (_jsxs("div", { className: "border-b flex items-start justify-between", children: [_jsx("nav", { className: "flex space-x-4 px-4", "aria-label": "Tabs", children: tabs.map((tab) => {
                    const cursor = tab.disabled ? 'cursor-not-allowed' : 'cursor-pointer';
                    return (_jsx("a", { href: tab.href || '#' + tab.name, onClick: (e) => _onClick(e, tab), className: clsx(tab.current
                            ? 'border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-50'
                            : 'border-transparent text-gray-500 dark:text-slate-300 hover:border-slate-400 hover:text-gray-700 dark:hover:border-slate-200 dark:hover:text-gray-200 ', className, 'whitespace-nowrap border-b-2 py-2 px-1 text-sm font-medium', cursor), "aria-current": tab.current ? 'page' : undefined, children: tab.label }, tab.name));
                }) }), _jsx("div", { className: "flex gap-x-1", children: actions })] }));
}
export function TabsPanel({}) {
    const { tabs } = useTabs();
    const content = tabs.find((t) => t.current)?.content;
    if (!content) {
        return null;
    }
    if (isValidElement(content)) {
        return _jsx("div", { className: "h-full overflow-y-auto flex-1", children: content });
    }
    const Component = content;
    return (_jsx("div", { className: "h-full overflow-y-auto flex-1", children: _jsx(Component, {}) }));
}
//# sourceMappingURL=Tabs.js.map