"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "TabList", {
    enumerable: true,
    get: function() {
        return TabList;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _tab = require("./tab");
const _tabContext = require("./tabContext");
const _css = require("../utils/css");
const TabList = (props)=>{
    const boxRef = (0, _react.useRef)(null);
    const tabContext = (0, _react.useContext)(_tabContext.TabContext);
    const onItemClick = (0, _react.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 = (0, _react.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__*/ (0, _jsxruntime.jsxs)("div", {
        className: (0, _css.cn)("orderly-flex orderly-border-b orderly-border-b-divider orderly-px-3 orderly-items-center orderly-tab-header", props.className),
        children: [
            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                className: (0, _css.cn)("orderly-relative orderly-flex-1 orderly-h-full orderly-flex orderly-items-center", props.className),
                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                    className: (0, _css.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__*/ (0, _jsxruntime.jsx)(_tab.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