import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from '../box';
import { vui } from '../core';
import { Icon } from '../icon';
import { List, ListItem } from '../list';
import { TagButton } from '../tag';
import { cs } from '../utils';
import { colors, iconSizeMapper } from './consts';
import theme from './theme';
const { activeBg, border, color, hover, main } = colors;
export const TabsNavBar = vui((props, ref) => {
    const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props;
    const iconSize = iconSizeMapper?.[size] || 'md';
    const { sizes } = theme ?? {};
    const fontSize = sizes[size ?? 'md'].tabsNavBar.fontSize;
    const h = sizes[size ?? 'md'].tabsNavBar.h;
    const borderWidth = sizes[size ?? 'md'].tabsNavBar.borderWidth;
    const py = sizes[size ?? 'md'].tabsNavBar.py;
    const iconMarginRight = size === 'xxl' ? '16px' : '8px';
    const isActive = (tab) => !tab.disabled && tab?.index === activeNavItem;
    return (_jsxs(List, { alignItems: "end", borderBottom: showBorder ? `1px solid ${border}` : 'none', className: cs('vui-tabsNavBar'), display: "flex", isInteractive: true, mb: "20px", ref: ref, w: 1, children: [tabs?.map?.(tab => (_jsxs(ListItem, { activeBg: tab.disabled ? undefined : activeBg, bg: "white", className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`, color: isActive(tab) ? main : color, disabled: tab.disabled, display: "inline-flex", fontSize: fontSize, fontWeight: 500, h: h, hoverBg: tab.disabled ? undefined : hover, onClick: e => onNavItemClick?.(tab.index || 0, e), position: "relative", px: "16px", py: py, children: [_jsxs(Box, { alignItems: "center", children: [!!tab.icon && _jsx(Icon, { mr: iconMarginRight, name: tab.icon, size: iconSize }), tab.title] }), !!tab.onDelete && (_jsx(TagButton, { disabled: tab.disabled, hoverBg: "skyBlue.80", hoverColor: "seaBlue.main", isRound: false, ml: 1, onClick: e => {
                            e.stopPropagation();
                            tab?.onDelete?.(e);
                        }, title: "Delete" })), isActive(tab) && (_jsx(Box, { animation: animationDirection, bg: main, bottom: "-1px", className: "vui-tabsNavBarItemActiveIndicator", h: borderWidth, left: 0, position: "absolute", w: 1, children: "\u00A0" }))] }, tab.index))), !!actions && (_jsx(Box, { ml: "auto", px: 0.75, py: 0.5, children: actions }))] }));
});
TabsNavBar.displayName = 'TabsNavBar';
export default TabsNavBar;
//# sourceMappingURL=tabsNavBar.js.map