import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useContext, useMemo, useRef } from "react";
// import { TabIndicator } from "./indicator";
import { Tab } from "./tab";
import { TabContext } from "./tabContext";
import { cn } from "../utils/css";
export const TabList = (props)=>{
    const boxRef = useRef(null);
    const tabContext = useContext(TabContext);
    const onItemClick = useCallback((value, event)=>{
        if (typeof props.onTabChange === "undefined") return;
        // calcLeft(event.currentTarget as HTMLButtonElement);
        props.onTabChange?.(value);
        if (!tabContext.contentVisible) {
            tabContext.toggleContentVisible();
        }
    }, [
        props.onTabChange,
        tabContext.contentVisible
    ]);
    const extraNode = useMemo(()=>{
        if (typeof props.tabBarExtra === "undefined") return null;
        if (typeof props.tabBarExtra === "function") {
            return props.tabBarExtra(tabContext);
        }
        return props.tabBarExtra;
    }, [
        props.tabBarExtra,
        tabContext
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        className: cn("orderly-flex orderly-border-b orderly-border-b-divider orderly-px-3 orderly-items-center orderly-tab-header", props.className),
        children: [
            /*#__PURE__*/ _jsx("div", {
                className: cn("orderly-relative orderly-flex-1 orderly-h-full orderly-flex orderly-items-center", props.className),
                children: /*#__PURE__*/ _jsx("div", {
                    className: cn("orderly-flex orderly-h-full orderly-gap-5 tabs-list", {
                        "orderly-w-full": props.fullWidth
                    }),
                    ref: boxRef,
                    children: props.tabs.map((item, index)=>{
                        return /*#__PURE__*/ _jsx(Tab, {
                            title: item.title,
                            value: item.value ?? index,
                            disabled: item.disabled,
                            fullWidth: props.fullWidth,
                            mode: props.mode,
                            className: props.identifierClassName,
                            active: !!item.value && !!props.value && item.value === props.value && tabContext.contentVisible,
                            onClick: onItemClick
                        }, index);
                    })
                })
            }),
            extraNode
        ]
    });
};

//# sourceMappingURL=tabList.js.map